Redux.applyMiddleware()
. This statement is then provided as a second optional parameter to the createStore()
function. Take a look at the code at the bottom of the editor to see this. Then, to create an asynchronous action, you return a function in the action creator that takes dispatch
as an argument. Within this function, you can dispatch actions and perform asynchronous requests.
In this example, an asynchronous request is simulated with a setTimeout()
call. It's common to dispatch an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once you receive the data, you dispatch another action which carries the data as a payload along with information that the action is completed.
Remember that you're passing dispatch
as a parameter to this special action creator. This is what you'll use to dispatch your actions, you simply pass the action directly to dispatch and the middleware takes care of the rest.
handleAsync()
action creator. Dispatch requestingData()
before the setTimeout()
(the simulated API call). Then, after you receive the (pretend) data, dispatch the receivedData()
action, passing in this data. Now you know how to handle asynchronous actions in Redux. Everything else continues to behave as before.
requestingData
action creator should return an object of type equal to the value of REQUESTING_DATA
.
testString: assert(requestingData().type === REQUESTING_DATA, 'The requestingData
action creator should return an object of type equal to the value of REQUESTING_DATA
.');
- text: The receivedData
action creator should return an object of type equal to the value of RECEIVED_DATA
.
testString: assert(receivedData('data').type === RECEIVED_DATA, 'The receivedData
action creator should return an object of type equal to the value of RECEIVED_DATA
.');
- text: asyncDataReducer
should be a function.
testString: assert(typeof asyncDataReducer === 'function', 'asyncDataReducer
should be a function.');
- text: Dispatching the requestingData action creator should update the store state
property of fetching to true
.
testString: assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), 'Dispatching the requestingData action creator should update the store state
property of fetching to true
.');
- text: Dispatching handleAsync
should dispatch the data request action and then dispatch the received data action after a delay.
testString: assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })(), 'Dispatching handleAsync
should dispatch the data request action and then dispatch the received data action after a delay.');
```