jeffbski
commented
6 years ago @naorye Thanks for writing, sorry for the slow response. Things were a little busy recently. Anyway, there are a variety of ways to solve this type of thing.
If you do need to know when something is done before continuing with other things, then I suggest that you have your API calls that manipulate data return a promise or observable so you can know when they have completed.
Then from the result of the API in your logic then you can dispatch (and that will be able to update synchronously). So when you will know when you are done. So your API calls could be async and then you have a bunch of synchronous actions and just one complex flow which brings it altogether for that group of things. Keeping API's free of dispatching is nice for testing and also for using the API's in other interesting ways.
export const doSomething = createLogic({
type: actions.doSomething,
async process({ getState, action, api }, dispatch, done) {
const {data} = await api.getWidgets();
dispatch(widgetsSuccess(data));
const {otherData} = await api.getSomethingElse(data.foo);
dispatch(anotherSuccess(otherData);
// ...
// at this point all async stuff is done
done();
}
});
If for some reason you can't take this approach then some people simply fire events and then check that status in the other events to know when everything is done. For instance they might dispatch some parallel actions and then simply listen for an array of actions and check the state to know when you are done with all.
export const doSomething = createLogic({
type: actions.doSomething,
async process({ getState, action, api }, dispatch, done) {
// load widgets and categories in parallel, having them each dispatch when done
dispatch({ type: LOAD_WIDGETS });
dispatch({ type: LOAD_CATEGORIES });
// other logic will wait for them to be completed
done();
}
});
export const loadWidgets = createLogic({
type: LOAD_WIDGETS,
async process({ getState, action, api }, dispatch, done) {
const {data} = await api.getWidgets();
dispatch({ type: WIDGETS_LOAD_SUCCESS, payload: data });
done();
}
});
export const loadCategories = createLogic({
type: LOAD_CATEGORIES
async process({ getState, action, api }, dispatch, done) {
const {data} = await api.getCategories();
dispatch({ type: CATEGORIES_LOAD_SUCCESS, payload: data });
done();
}
});
export const loadedCategoriesAndWidgets = createLogic({
// in this case either one might be last so listen for both
type: [WIDGETS_LOAD_SUCCESS, CATEGORIES_LOAD_SUCCESS],
process({action, getState}, dispatch, done) {
// we can check the state that we have both widgets and categories
const state = getState();
if (state.widgets && state.categories) { // we have both
dispatch({type: WIDGETS_CATEGORIES_LOADED});
}
done();
}
};So it really depends on the individual use case which works better but I like to keep my API's clean of dispatching and then tie things together in a few logics.
I am thinking about having redux-logic return a promise or observable from it's dispatch, but in some multi-dispatching use cases it is hard for users to get right, so I am still evaluating the idea.
Hopefully my above solutions will help, but if not just let me know if you have additional questions.
cyrilchapon
naorye
Johncy1997
Blargh1
I have the following logic:
Here I am trying to achieve two things:
done(data)should somehow return that data.What am I doing wrong? Is there any way to fix it?
Thanks, NaorYe