如何为PayloadAction类型的Redux动作编写actionSanitizer？

问题背景 #

使用Redux Toolkit的createSlice创建reducer时，生成的动作类型是PayloadAction，但Redux DevTools的actionSanitizer要求的函数类型为<A extends Action>(action: A, id: number) => A，直接指定参数为PayloadAction<any>会出现类型不兼容的问题。

解决方案 #

方案1：使用类型断言快速处理 #

在actionSanitizer函数内部，将传入的action断言为PayloadAction<any>，再进行判断和处理：

import { DevToolsEnhancerOptions, PayloadAction } from '@reduxjs/toolkit';

const devToolsConfiguration: DevToolsEnhancerOptions = {
  name: 'Qwerty',
  actionSanitizer: (action) => {
    const typedAction = action as PayloadAction<any>;
    // 注意：createSlice生成的action type格式为「切片名称/reducer名称」
    if (typedAction.type === 'Something/someReducer') {
      return { ...typedAction, payload: '<<LONG_BLOB>>' };
    }
    return action;
  },
};

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, logger],
  devTools: process.env.NODE_ENV === 'production' ? false : devToolsConfiguration
});

方案2：使用类型守卫增强类型安全性 #

编写自定义类型守卫函数，判断action是否为PayloadAction，避免直接断言的潜在风险：

import { DevToolsEnhancerOptions, PayloadAction, Action } from '@reduxjs/toolkit';

// 自定义类型守卫，判断action是否包含payload属性
function isPayloadAction(action: Action): action is PayloadAction<any> {
  return 'payload' in action;
}

const devToolsConfiguration: DevToolsEnhancerOptions = {
  name: 'Qwerty',
  actionSanitizer: (action) => {
    if (isPayloadAction(action) && action.type === 'Something/someReducer') {
      return { ...action, payload: '<<LONG_BLOB>>' };
    }
    return action;
  },
};

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, logger],
  devTools: process.env.NODE_ENV === 'production' ? false : devToolsConfiguration
});

关键说明 #

• actionSanitizer的泛型要求它能处理任意Action类型，因此不能直接给参数指定PayloadAction类型，必须在函数内部做类型收窄。
• createSlice生成的action type格式为[切片name]/[reducer名称]，不要直接使用自定义的字符串（比如示例中的someAction），否则无法匹配目标动作。

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