如何为Redux Toolkit所有派发的异步动作自动调用unwrapResult

1. 实现自定义封装钩子 #

在你的configureStore.ts文件中，新增一个自定义钩子useWrappedAppDispatch，它会封装原有的useAppDispatch，自动对异步Action执行unwrapResult并统一捕获错误：

import { configureStore, unwrapResult } from "@reduxjs/toolkit";
import { useDispatch, useCallback } from "react-redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
// 导入你的toast工具，比如：import { toast } from "react-toastify";

import { logger } from "../middleware/logger";
import rootReducer from "./reducer";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
      immutableCheck: false,
    }).concat(logger),
});

export { store };

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

// 新增：封装后的dispatch钩子
export const useWrappedAppDispatch = () => {
  const dispatch = useAppDispatch();

  return useCallback((action) => {
    const dispatchResult = dispatch(action);

    // 仅处理异步Action的Promise返回值
    if (dispatchResult instanceof Promise) {
      return dispatchResult
        .then(unwrapResult)
        .catch((err) => {
          toast("Error processing action");
          // 重新抛出错误，允许组件额外处理
          return Promise.reject(err);
        });
    }

    // 同步Action直接返回结果
    return dispatchResult;
  }, [dispatch]);
};

export type RootState = ReturnType<typeof rootReducer>;

export interface GetState {
  getState: () => RootState;
}

2. 在组件中使用封装后的Dispatch #

现在可以直接在组件中使用useWrappedAppDispatch，无需手动调用unwrapResult，错误会自动触发toast提示：

function SomeComponent() {
  const dispatch = useWrappedAppDispatch();

  return (
    <button
      onClick={() =>
        dispatch(myAsyncAction())
          // 可选：如果组件需要额外处理错误，可以继续catch
          .catch((err) => {
            console.log("组件层面额外处理错误：", err);
          })
      }
    >
      执行异步操作
    </button>
  );
}

关键说明 #

• 自动unwrapResult：对于createAsyncThunk创建的异步Action，钩子会自动调用unwrapResult，直接返回成功的payload，避免手动重复调用。
• 统一错误处理：所有异步Action的错误都会被捕获并显示toast，同时重新抛出错误，不影响组件层面的额外错误处理。
• 兼容同步Action：同步Action的派发不受影响，直接返回原dispatch结果。

内容的提问来源于stack exchange，提问作者driouxg