Redux.applyMiddleware()
. Esta declaración se proporciona luego como un segundo parámetro opcional para la función createStore()
. Echa un vistazo al código en la parte inferior del editor para ver esto. Luego, para crear una acción asíncrona, devuelve una función en el creador de la acción que toma el dispatch
como un argumento. Dentro de esta función, puede enviar acciones y realizar solicitudes asíncronas. En este ejemplo, una solicitud asíncrona se simula con una llamada setTimeout()
. Es común enviar una acción antes de iniciar cualquier comportamiento asíncrono para que el estado de su aplicación sepa que se están solicitando algunos datos (este estado podría mostrar un icono de carga, por ejemplo). Luego, una vez que recibe los datos, envía otra acción que lleva los datos como una carga útil junto con la información de que la acción se ha completado. Recuerde que está pasando el dispatch
como un parámetro a este creador de acción especial. Esto es lo que utilizará para despachar sus acciones, simplemente pase la acción directamente al despacho y el middleware se encarga del resto. handleAsync()
. Envíe setTimeout()
requestingData()
antes de setTimeout()
(la llamada de API simulada). Luego, después de recibir los datos (simulados), despache la acción receivedData()
, pasando estos datos. Ahora ya sabe cómo manejar acciones asíncronas en Redux. Todo lo demás sigue comportándose como antes. requestingData
creador de acción debería devolver un objeto de tipo igual al valor de 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: El receivedData
creador de acción debería devolver un objeto de tipo igual al valor de 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
debería ser una función.
testString: 'assert(typeof asyncDataReducer === "function", "asyncDataReducer
should be a function.");'
- text: El envío del creador de la acción requestingData debe actualizar la propiedad de state
almacenamiento de fetching a 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: Despachando handleAsync
debe despachar la acción de solicitud de datos y luego despachar la acción de datos recibida después de un retraso.
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.");'
```