Redux Toolkit如何实现支持可选payload的部分状态更新

你当前将setGlobalState的action payload类型直接声明为globalState，TypeScript会强制要求传入该接口定义的所有必填字段，因此当你缺省gender这类不需要更新的字段时，就会抛出类型缺失的报错。

直接将payload类型改为TypeScript内置工具类型Partial<globalState>即可，该类型会自动将原接口的所有字段转为可选属性，完全匹配「仅传入待更新的部分字段」的需求，无需为每个状态字段单独编写action，也不需要使用任何非空断言。

修正后的完整实现代码如下：

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

type userType = 
  | { user: ''; uid: '' }
  | { user: 'user'; uid: string }

export interface globalState {
  currentUser: userType;
  currentMode: 'a1' | 'a2' | 'a3';
  gender: '' | 'male' | 'female';
}

const initialState: globalState = {
  currentUser: {
    user: '',
    uid: ''
  },
  currentMode: 'a3',
  gender: '',
};

export const globalSlice = createSlice({
  name: 'global',
  initialState,
  reducers: {
    setGlobalState: (state, action: PayloadAction<Partial<globalState>>) => {
      // 直接合并payload即可，无需额外展开
      Object.assign(state, action.payload);
    }
  }
});

export const { setGlobalState } = globalSlice.actions;
export default globalSlice.reducer;

• Partial<T>是TypeScript原生提供的工具类型，不需要额外引入，它会遍历传入的接口类型T，将所有字段标记为可选，同时保留每个字段原有的值类型校验规则
• 修复后dispatch调用时，不管传入1个还是多个待更新字段，TS都会自动校验传入字段的名称、值类型是否符合globalState的定义，避免写错字段名、传错值类型的问题
• 你原有dispatch代码中currentMode: 'a1' || ''的写法是多余的，'a1'本身就是currentMode字段的合法值，直接写currentMode: 'a1'即可；另外给currentUser传字符串'user'不符合类型要求，currentUser需要传入符合userType定义的对象，例如currentUser: { user: 'user', uid: '123' }
• 原代码中userType定义里user: ''和uid: ''之间漏了分隔分号，会导致TS解析错误，修正后的代码已经补全了格式问题

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