Как использовать настраиваемое промежуточное ПО для асинхронных действий

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$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 шаблон.

Answer 1

Добавляя redux-logger, я забыл использовать getDefaultMiddleware().

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

Это вызвало проблему, поскольку хранилище больше не было настроено для использования промежуточного программного обеспечения thunk.