Redux: Execute two actions after one another

Question

I ran into the following problem:

• I have a button within a React Component that dispatches actionA on click
• actionA invokes reducerFoo which then changes its state
• ...this state change should directly lead to....
• actionB is dispatched which uses part of reducerFoo's state as its payload
• actionB invokes reducerBar which changes its state

So reducerBar is dependent on a state change in reducerFoo.

What would be a clean solution to solve this problem?

Answer 1

You can use redux-saga to dispatch another action based on the results of the previous call/action.

Answer 2

Using redux-thunk it looks something like this;

export function saveSnipEdit(item) {
  return (dispatch, getState) => {
    dispatch({type: 'SaveSnipEdit', item});
    dispatch({type: 'ApiSetSnipData', data: {data: getState().snipData.allSnips}});
  };
}