Redux.applyMiddleware()
. Затем этот оператор предоставляется в качестве второго необязательного параметра функции createStore()
. Посмотрите на код внизу редактора, чтобы увидеть это. Затем, чтобы создать асинхронное действие, вы возвращаете функцию в создателе действия, который принимает dispatch
в качестве аргумента. В рамках этой функции вы можете отправлять действия и выполнять асинхронные запросы. В этом примере асинхронный запрос моделируется с помощью вызова setTimeout()
. Обычно перед отправкой какого-либо асинхронного поведения вы отправляете какое-либо действие, чтобы ваше состояние приложения знало, что запрашиваются некоторые данные (например, это состояние может отображать значок загрузки). Затем, как только вы получите данные, вы отправите другое действие, которое несет данные как полезную нагрузку вместе с информацией о завершении действия. Помните, что вы dispatch
в качестве параметра этому создателю специальных действий. Это то, что вы будете использовать для отправки ваших действий, вы просто передаете действие непосредственно для отправки, а промежуточное ПО заботится обо всем остальном. handleAsync()
. Отправка requestingData()
перед setTimeout()
(имитированный вызов API). Затем, после получения (притворяются) данных, отправьте receivedData()
действиеData receivedData()
, передав эти данные. Теперь вы знаете, как обрабатывать асинхронные действия в Redux. Все остальное продолжает вести себя по-прежнему. requestingData
action creator should return an object of type equal to the value of REQUESTING_DATA
.");'
- text: ''
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
должен быть функцией.
testString: 'assert(typeof asyncDataReducer === "function", "asyncDataReducer
should be a function.");'
- text: ''
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: ''
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.");'
```