redux - 如何使用自定义中间件进行异步操作
问题描述
这是我的 searchSlice 中的内容:
export const search = param => (dispatch, getState) => {
dispatch(searchParamUpdated(param))
const items = getState().items.entities
dispatch(itemsMatchesByNameUpdated(items.filter(item => item.name.indexOf(param) > -1)))
dispatch(itemsMatchesByBrandUpdated(items.filter(item => item.brand.indexOf(param) > -1)))
}
这是我在组件中使用它的方式:
<input onChange={event => dispatch(search(event.target.value))}/>
每当我在输入字段中输入时都会出错。这是我的日志:
redux-logger.js:1 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
at Object.performAction (<anonymous>:1:34471)
at y (<anonymous>:1:36743)
at e (<anonymous>:1:40562)
at Object.dispatch (redux-logger.js:1)
at dispatch (<anonymous>:1:28545)
at onChange (Search.js:15)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
我已经使用模板引导应用create-react-app
程序redux
。
解决方案
在添加 redux-logger 时,我忘了使用 getDefaultMiddleware()。
export default configureStore({
reducer: {
search: searchReducer,
},
middleware: [...getDefaultMiddleware(), logger]
});
这导致了问题,因为商店不再配置为使用 thunk 中间件。
推荐阅读
- python - 是否有工具或脚本来解析 XML 文件并复制粘贴嵌套元素
- c# - WCF - Removing minOccurs 0 from sub-service WSDL
- awk - 可以使用 sed in 吗?
- javascript - Multiple Js function imports
- amazon-web-services - AWS cognito pricing
- vue.js - Can props for bootstrap-vue-tables be set dynamically from parent components?
- android - 如何在没有 Android Studio 的情况下启动 Android 模拟器?
- apache - 从主目录服务 Apache 并使用带有私钥的 ssh
- android - 防止/禁用屏幕录制
- r - pmap不一致的行为?