Redux.applyMiddleware()
。然后,此语句作为createStore()
函数的第二个可选参数提供。看一下编辑器底部的代码,看看这个。然后,要创建异步操作,您将在动作创建器中返回一个函数,该函数将dispatch
作为参数。在此函数中,您可以分派操作并执行异步请求。在此示例中,使用setTimeout()
调用模拟异步请求。在启动任何异步行为之前调度操作是很常见的,这样您的应用程序状态就知道正在请求某些数据(例如,此状态可能会显示加载图标)。然后,一旦收到数据,就会发送另一个操作,该操作将数据作为有效负载以及操作完成的信息。请记住,您将dispatch
作为参数传递给此特殊操作创建者。这是您用于分派操作的方法,您只需将操作直接传递给调度,中间件就可以处理其余操作。 handleAsync()
动作创建器中写入两个调度。调度requestingData()
在之前setTimeout()
模拟API调用)。然后,在收到(假装)数据后,调度receivedData()
操作,传入此数据。现在您知道如何在Redux中处理异步操作。其他一切继续像以前一样。 requestingData
操作创建者应返回类型等于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: receivedData
操作创建者应返回类型等于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
应该是一个函数。
testString: 'assert(typeof asyncDataReducer === "function", "asyncDataReducer
should be a function.");'
- text: 调度requestedData操作创建者应该将获取的store state
属性更新为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: 调度handleAsync
应调度数据请求操作,然后在延迟后调度接收的数据操作。
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.");'
```