Redux Toolkit 中间件无法处理成功的异步操作

Question

我已经使用configureStore在我的下一个js应用程序中将我自己的一些中间件集成到Redux工具包存储中。中间件旨在处理异步操作，例如 fetchAccounts/fulfilled 来更新导航状态和用户帐户。尽管通过添加它们

getDefaultMiddleware({
  thunk: {
    extraArgument: updateNavTabMiddleware, updateSelectedAccountMiddleware
  },
  serializableCheck: false,
}),

它们似乎是灰色的。我使用 console.log 来调试传入的操作，但没有看到预期的日志。如何正确调试 Redux Toolkit 中的中间件，有没有办法确保它们实际上在减速器之前按预期顺序执行？ 在文档中，我读到 Redux Toolkit configureStore API 在存储创建期间自动添加 thunk 中间件，因此它通常应该可用，无需额外配置。 这是一些代码：

// Middleware
import { PayloadAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
export const updateSelectedAccountMiddleware = (store: MiddlewareAPI) => (next: Dispatch) => (action: PayloadAction<Account[] | number>) => {
  console.log(action);
  if (action.type === 'accounts/fetchAccounts/fulfilled' && Array.isArray(action.payload)) {
    const savedAccountId = getSelectedAccountIdLS();
    const savedAccount = action.payload.find((account: Account) => account.id === Number(savedAccountId));

    store.dispatch(setSelectedAccount(savedAccount || action.payload[0]));
  }

  if (action.type === 'accounts/deleteAccount/fulfilled' && typeof(action.payload) === 'number') {
    const state = store.getState();
    let newAccounts = state.accounts.data;

    if (state.accounts.selected.id === action.payload) {
      newAccounts = state.accounts.data.filter((item: Account) => item?.id !== action.payload);
    }

    saveSelectedAccountIdLS(newAccounts[0].id);
    store.dispatch(setSelectedAccount(newAccounts[0]));
  }

  return next(action);
};

// Store
export const makeStore = () => {
  return configureStore({
    reducer: {
      visual: visualReducer,
      user: userReducer,
      accounts: accountsReducer,
      topics: topicsReducer,
      channelsHistoryRecords: channelsHistoryRecordsReducer,
      competitors: competitorsReducer,
      words: wordsReducer
    },
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: updateNavTabMiddleware, updateSelectedAccountMiddleware
      },
      serializableCheck: false,
    }),
  })
}

// Infer the type of makeStore
export type AppStore = ReturnType<typeof makeStore>
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppStore: () => AppStore = useStore

Answer 1

看来您只是将这些中间件函数传递给 thunk 中间件作为其“额外参数”。虽然 Redux-Toolkit 默认情况下确实应用 Thunk 中间件，但 Thunk 中间件的

extraArgument

不会向存储添加任何额外的中间件。

如果您尝试向商店添加其他中间件，则应在创建商店时将它们附加/前置到商店的中间件中。

请参阅 configureStore middleware 和 getDefaultMiddleware 文档了解完整详细信息。

在创建/配置商店的中间件时，将您的

updateNavTabMiddleware

和

updateSelectedAccountMiddleware

中间件功能添加到商店的中间件中。

商店

const reducer = {
  visual: visualReducer,
  user: userReducer,
  accounts: accountsReducer,
  topics: topicsReducer,
  channelsHistoryRecords: channelsHistoryRecordsReducer,
  competitors: competitorsReducer,
  words: wordsReducer
};

export const makeStore = () => {
  return configureStore({
    reducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({ serializableCheck: false })
        .concat(updateNavTabMiddleware, updateSelectedAccountMiddleware),
  });
};