如何使用自定义中间件进行异步操作

Question

这是我的 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 (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 (react-dom.development.js:11039)
    at discreteUpdates (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

我已经使用 create-react-app 和 redux 模板引导了应用程序。

Answer 1

添加 redux-logger 时忘记使用 getDefaultMiddleware()。

export default configureStore({
  reducer: {
    search: searchReducer,
  },
  middleware: [...getDefaultMiddleware(), logger]
});

这导致了问题，因为商店不再配置为使用 thunk 中间件。

如何使用自定义中间件进行异步操作

How to use custom middleware for async actions

redux

redux-thunk

redux-toolkit