redux-logic
                                
                                 redux-logic copied to clipboard
                                
                                    redux-logic copied to clipboard
                            
                            
                            
                        wait for dispatch
I am using redux-connect to load initial data. When using thunks, I can simply do:
const resolve = [{
  promise: ({params, store}) => store.dispatch(init(params.layout))
}];
store.dispatch returns a promise.
What's the proper way to implement it in redux-logic? Below is my solution, but I think there should be more elegant way to do it.
const resolve = [{
  promise: ({params, store}) => {
    const defer = {};
    defer.promise = new Promise((res, rej) => {
      defer.resolve = res;
      defer.reject = rej;
    });
    store.dispatch(init(params.layout, defer));
    return defer.promise;
  },
}];
The logic handler calls defer.resolve() before calling done().
init() is a simple action creator.
@lsentkiewicz Thanks for asking the question. I haven't seen redux-connect but it is pretty neat.
I have been meaning to write up some guides (recipe books) on how to do various things especially with regards to loading data and such.
Typically what I have been doing is to have redux-logic that listens for an action pertaining to the route, like R:/foo/bar/baz.
So I trigger those actions as the route changes and thus the logic gets run whenever it is needed.
On the server then one can just do something like
store.dispatch({ type: 'R:/foo/bar/baz' });
// When I created the store, I mounted the logicMiddleware
// instance on store as store.logicMiddleware so you could
// access it later.
// store.logicMiddleware.whenComplete waits for any 
// in-flight async logic processing to complete before returning
store.logicMiddleware.whenComplete(() => { 
  // state is ready for rendering
  ReactDOM.renderToString(...)
});
I need to create a formal example that explains all of this.
I'll also look closer at redux-connect and your idea of how to possibly use that.
I think it should work:
const resolve = [{
  promise: ({params, store}) => {
    store.dispatch(init(params.layout));
    return store.whenComplete();
  }
}]
The wrapped component won't be rendered until the promise is resolved. But I am not sure if #54 (infinite logic) can cause any issues. I am not using server-side rendering in my app.
I had a typo in previous example which I fixed. store.whenComplete should be store.logicMiddleware.whenComplete since I manually attach logicMiddleware to store after creating it so that it is available for later use.
Yes, infinite logic (by its definition) would not complete so the whenComplete would never be called, but if you don't have situation then it should be fine. The only other thing that might cause similar issues is if one has anything that is timer based that continues to dispatch, that might keep whenComplete open longer than desired otherwise it should work.