Drew Drew - 3 months ago 77
React JSX Question

Redux Thunk Callback after dispatching an action?

So in my React component, I have this:

this.props.updateAlertCallback('error', ERROR_MESSAGE)


My
updateAlertCallback
action is:

export const updateAlert = (alert, message) => {
return {
type: 'UPDATE_ALERT',
alert,
message
}
}

export const updateAlertCallback = (alert, message) => {
return dispatch => {
return dispatch(updateAlert(alert, message)).then(() => {
console.log('Done!');
});
}
}


I'm getting the following error: Uncaught TypeError: dispatch(...).then is not a function

What's the proper way to log something after
updateAlert
is done running?

Answer

Redux-thunk is your answer. In your store code change

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

to

const enhancers = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f,
  applyMiddleware(thunk)
);

and you will be able to use thunks with your redux actions.

Refer to https://github.com/gaearon/redux-thunk#installation

Comments