[Question] How do I dispatch multiple actions in one action?

Hi.

Say I have one action initialize, for this as for many actions I am dispatching an action:start, action:success and action:failure. Most of these have counterparts in the reducers where they update properties like isFetching, isSaving, etc.

If I use redux-actions instead of redux-thunk then how do I let my reducers know the correct state at the correct time? If I can only dispatch one event at the end of one action then I can’t dispatch multiple actions/events from one action …

[addnab]

redux-thunk is a middleware unlike redux-actions which is a utility library for creating and handling actions. So you can still continue to use redux-thunk to dispatch multiple actions and use redux-actions API to createAction and handleActions like:

action.js

const fetchRequest = createAction('FETCH_REQUEST')
const fetchSuccess = createAction('FETCH_SUCCESS')
const fetchFailure = createAction('FETCH_FAILURE)
const fetch = (url) => {
    return async (dispatch, getState) => {
        try {
            dispatch(fetchRequest())
            const response= await _fetch(url)
            if(result.statusCode !== 200)
                throw new Error()
            const result = await response.json()
            dispatch(fetchSuccess(result))
        }
        catch(error) {
            dispatch(fetchFailure(error))
        }
    }
}

reducers.js

const reducer = handleActions({
  FETCH_REQUEST: (state, action) => ({
    ...state,
    fetchError: false,
    isFetching: true,
    displayText: "Fetching..."
  },

  FETCH_SUCCESS: (state, action) => ({
    ...state,
    fetchError: false,
    isFetching: false,
    displayText: action.payload
  }),

  FETCH_FAILURE: (state, action) => ({
    ...state,
    fetchError: true,
    isFetching: false,
    displayText: action.payload 
  })
});

[moersing]

@addnab Thank you , This is good solution.