Как использовать AsyncThunk в middleware redux?

Question

[ArgeoMer]

Начал реализовывать механизм, который обновляет раннее загруженные данные, если произошло действие связанное с авторизацией. Для этого решил написать middleware

export const updateData =
   (_store) =>
      (next) =>
         (action) => {
            if (action.type.startsWith('login/')) {
               next(fetchOffersAction())
            }
            return next(action)
         }

fetchOffersAction- создается через createAsyncThunk.

export const fetchOffersAction = createAsyncThunk(
   'data/fetchOffers',
   async (_arg, { dispatch, extra: api }) => {
      const { data } = await api.get('/offers')
      return data
   }
)

стор конфигурирую так:

const store = configureStore({
   reducer: reducer,
   middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
         thunk: {
            extraArgument: api
         }
      }).concat(redirect, updateData)
})

Но при выполнении получаю эту ошибку

Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.

Как это можно пофиксить или какой другой подход можно использовать, вместо middleware?

Answer 1

[ArgeoMer]

Next прокидывает action в следующий middleware или, если middleware больше нет, запускает action в редьюсер. По этому пути ясно, что acync Thunk не может быть обработан(он не встречает на этом пути необходимый DefaultMiddleware)
Чтобы это исправить достаточно отправить асtion не в следующий middleware, а прокинуть его в начала пути через store.dispatch(asyncThunk)

export const updateData: Middleware =
   (store) => {
      const dispatch = store.dispatch as AppDispatch
      return (next) =>
         (action: PayloadAction) => {
            if (action.type.startsWith('login/')) {
               dispatch(fetchOffersAction())
            }
            return next(action)
         }
   }