redux Asynchronous Data Flow Redux-thunk: basics
Example
While redux itself is entirely synchronous, you can use a middleware such as redux-thunk to handle asynchronous actions.
A "thunk" is another name for a callback. It is a function that is usually passed as an argument to be called at a later time.
To use, apply the middleware to your redux store:
import ReduxThunk from 'redux-thunk';
const store = createStore(
reducer,
applyMiddleware(ReduxThunk)
);
This allows you to pass a thunk to dispatch instead of a plain object. The middleware will recognize the thunk and call it. The thunk takes the store's dispatch method as a parameter:
// an asynchronous action - "thunk"
// This will wait 1 second, and then dispatch the 'INCREMENT' action
const delayedIncrement = dispatch => setTimeout(() => {
dispatch({
type: 'INCREMENT'
});
}, 1000);
// dispatch the thunk.
// note: no () as we're passing the function itself
store.dispatch(delayedIncrement);
