Error: Actions must be plain objects. Use custom middleware for async actions. При работе с thunk

Не могу понять в чем проблема при создании action creator с redux-thunk. Максимально упростил код, чтобы показать саму проблему.

Мой action creator:

export const fetchTableData = () => async (dispatch: Dispatch<crmAction>) => {
  dispatch({type: CrmActionType.FETCH_TABLE_DATA})
}

Сам вызов action creator в компоненте:

useEffect(() => {
    dispatch(fetchTableData())
}, [])

И сам редьюсер:

import {crmAction, CrmActionType, crmState} from "../../types/crm"

const defaultState = {
  isLoadingTableData: false,
}

export const crmReducer = (state: crmState = defaultState, action: crmAction
):
  crmState => {
  switch (action.type) {
    case CrmActionType.FETCH_TABLE_DATA:
      return {
        ...state,
        isLoadingTableData: true
      }
    default:
      return state
  }
}

Update: Подключение thunk:

import {createStore, combineReducers, applyMiddleware, compose} from "redux"
import {composeWithDevTools} from "redux-devtools-extension"
import thunk from "redux-thunk"
import {crmReducer} from "./reducers/crmReducer"

const rootReducer = combineReducers({
  crm: crmReducer
})

export type RootState = ReturnType<typeof rootReducer>

export const store = createStore(
  rootReducer,
  compose(composeWithDevTools(), applyMiddleware(thunk))
)


Ответы (1 шт):

Автор решения: Danil Lyamkin

Действительно я не верно подключил thunk, чтобы решить проблему нужно лишь поставить подключение thunk первым аргументом в функцию compose()

Вместо

export const store = createStore(
  rootReducer,
  compose(composeWithDevTools(), applyMiddleware(thunk))
)

Нужно написать

export const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), composeWithDevTools())
)
→ Ссылка