React Redux中如何将initialState设为null后更新为User对象？

现有Redux Store配置如下：

import { userReducer } from './UserSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

需求是让user状态初始值为null，更新后变为User类型对象，User类型定义：

export type User = {
  id?: string;
  username?: string;
  role?: string;
};

尝试创建初始状态为null的slice时，TypeScript报错，提示从null -> User更新时状态可能为null，当前slice代码：

import { createSlice } from '@reduxjs/toolkit/react';  
import { User } from '../types/User'; 
 
const userSlice = createSlice({
  name: 'user',
  initialState: null as User | null,
  reducers: {
    setUser: (state, action: { payload: User; type: string }) => {
      state = action.payload;
    },
    setRole: (state, action: { payload: string; type: string }) => {
      state.role = action.payload;
    },
  },
});

export const { setUser, setRole } = userSlice.actions;
export const userReducer = userSlice.reducer;

不清楚如何用Immer风格处理null -> Object的更新，同时设置单个属性也存在类型问题。

1. 修正setUser的Immer写法 #

Immer中直接给state赋值不会生效，针对从null切换到User对象的场景，直接返回新的payload即可覆盖原状态：

setUser: (state, action: PayloadAction<User>) => {
  return action.payload;
},

建议用RTK自带的PayloadAction类型替代手动定义的action类型，写法更简洁规范。

2. 给setRole添加空值检查 #

由于状态可能为null，必须先判断状态存在，再修改属性，TypeScript会自动收窄类型：

setRole: (state, action: PayloadAction<string>) => {
  if (state) {
    state.role = action.payload;
  }
},

3. 优化类型声明（可选） #

可以明确导出状态类型，方便在组件中使用：

// 在slice末尾添加
export type UserState = ReturnType<typeof userSlice.reducer>;

完整修正后的Slice代码 #

import { createSlice, PayloadAction } from '@reduxjs/toolkit';  
import { User } from '../types/User'; 
 
const userSlice = createSlice({
  name: 'user',
  initialState: null as User | null,
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      return action.payload;
    },
    setRole: (state, action: PayloadAction<string>) => {
      if (state) {
        state.role = action.payload;
      }
    },
  },
});

export const { setUser, setRole } = userSlice.actions;
export const userReducer = userSlice.reducer;
export type UserState = ReturnType<typeof userSlice.reducer>;

思路说明 #

用null表示未初始化/未登录的用户状态是合理的，问题出在Immer使用方式和TypeScript类型处理：

• Immer支持两种更新逻辑：直接修改draft对象（针对已有对象/数组），或返回新状态（适合整体替换，比如从null转为对象）
• 当状态可能为null时，必须通过类型收窄（如if (state)）让TypeScript确认当前状态为可修改的User对象

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