Redux: Synchronous dispatchs

[zallek]

Is there a way to execute dispatchs synchronously ?

In the following example I would like wait for SEGMENTS_RULES_SET_PROJECT action to be traited before executing last 2 actions creators.
Info: SEGMENTS_RULES_SET_PROJECT will set userSlug and projectSlug on store.

//actions creator.js

export function setProject({ userSlug, projectSlug }) {
  return (dispatch) => {
    dispatch({
      type: ActionTypes.SEGMENTS_RULES_SET_PROJECT,
      userSlug,
      projectSlug,
    });
    dispatch(fetchProjectAnalyses({userSlug, projectSlug}));
    dispatch(fetchAllRules({userSlug, projectSlug}));
  };
}

export function fetchProjectAnalyses({ userSlug, projectSlug }) { ... }
export function fetchAllRules({ userSlug, projectSlug }) { ... }

Why ? Because it would allow fetchProjectAnalyses and fetchAllRules to get userSlug and projectSlug from getState instead having to receive it from function arguments. like:

Bad

export function fetchProjectAnalyses(({ userSlug, projectSlug }) {
  return (dispatch, getState) => {
    let { segmentsRules: { editingRule, project: currentProject } } = getState();
    ...
  };
}

Good: because it ensure to fetch analyses of the current project (in store)

export function fetchProjectAnalyses() {
  return (dispatch, getState) => {
    let { segmentsRules: { project: { userSlug, projectSlug } } } = getState();
    ...
  };
}

[gaearon]

This is definitely possible. Do you have a problem?

[zallek]

OK my bad, that's working exactly as I wanted >< Might be tired, 19h time to go home !

BTW, at @Botify we are using redux in production (on a small first project for now) and it's really great. Simple and pretty compared to some other flux implementations :)

[gaearon]

Glad to hear it!

[shrugs]

Just in case anyone stumbles into this PR searching for redux dispatch synchronous:

the dispatch function _is_ synchronous. Your reducer will be called before the code following dispatch is called. If you're using async reducers (by loading them in when a module of your app is loaded (perhaps using redux-router's async features), make sure the reducers are injected into the store before you dispatch actions that depend on those reducers.

Of course, if you're using some sort of async dispatch pattern (like thunk or saga) the effects of that function are async, so there's no guarantee that they'll be finished by the time the original dispatch returns.

// reducer
export default (state = {}, action) => {
  // 2
  return state
}

// some file

const actionCreator = () => ({ type: MY_ACTION })

//...
// 1
 dispatch(actionCreator())
// 3

Is the execution order

[markerikson]

To clarify that last comment a bit: the term "async reducers" generally refers to "slice reducers that are dynamically added after the application has started" (as opposed to "slice reducers that are known and passed to combineReducers when the store was created"). Reducer functions themselves should indeed be 100% synchronous.