reactjsreduxredux-thunkreact-thunk

Why don't chaining dispatch Redux-Thunk


Why don't chaining dispatch Redux Thunk? Only work first dispatch and second dispatch is not working.

Store:

const store = createStore(reducers, loadState(), applyMiddleware(thunk));

Action:

export function doSomething(name) {
    return function (dispatch) {
        dispatch({
            type: 'USERNAME',
            payload: name
        })
        dispatch({
            type: 'OTHER_TYPE',
            payload: 'text'
        })

         return true;
    }
}

Edit It's worked:

return Promise.all([
        dispatch({
            type: 'USERNAME',
            payload: name
        }),
        dispatch({
            type: 'OTHER_TYPE',
            payload: 'text'
        })
    ])

Solution

  • From the docs:

        // We can dispatch both plain object actions and other thunks,
        // which lets us compose the asynchronous actions in a single flow.
    
        return dispatch(
          makeASandwichWithSecretSauce('My Grandma')
        ).then(() =>
          Promise.all([
            dispatch(makeASandwichWithSecretSauce('Me')),
            dispatch(makeASandwichWithSecretSauce('My wife'))
          ])
        ).then(() =>
          dispatch(makeASandwichWithSecretSauce('Our kids'))
        ).then(() =>
          dispatch(getState().myMoney > 42 ?
            withdrawMoney(42) :
            apologize('Me', 'The Sandwich Shop')
          )
        );
    

    But I would recommend using redux-saga instead of redux-thunk because of these reasons.