如何为含error成员的Reducer Action指定类型？报错求解

报错原因 #

你定义的PayloadAction<void, string, never, Error>将error设为了必填属性，但createSlice自动生成的cancelLogin action creator默认不会给action添加error字段，导致TypeScript检测到类型不兼容，抛出error属性缺失的报错。

解决方案 #

方案1：将error设为可选类型（推荐）

把泛型第四个参数改为Error | undefined，让action允许存在或不存在error字段：

const reducer = createSlice({
  name: 'login',
  initialState,
  reducers: {
    cancelLogin: (state, action: PayloadAction<void, string, never, Error | undefined>) => {
      state.loggingIn = false;
      // 使用前先判断error是否存在
      if (action.error) {
        console.info(action.error.message);
      }
    }
  }
});

方案2：使用prepare函数强制生成带error的action

如果业务要求每次触发cancelLogin都必须携带error，需要通过prepare函数手动构造包含error的action，让TypeScript正确推断类型：

const reducer = createSlice({
  name: 'login',
  initialState,
  reducers: {
    cancelLogin: {
      // 处理state的reducer逻辑
      reducer: (state, action: PayloadAction<void, string, never, Error>) => {
        state.loggingIn = false;
        console.info(action.error.message);
      },
      // 自定义action的生成逻辑，强制传入error
      prepare: (error: Error) => {
        return {
          payload: undefined, // 对应PayloadAction的void类型payload
          error: error
        };
      }
    }
  }
});

调用该action时需要传入Error对象：

reducer.actions.cancelLogin(new Error('登录操作取消'));

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