React状态中非序列化值的处理方案咨询

首先，你代码里有两个关键问题：

1. new User(action.payload.name action.payload.email, action.payload.token) 这里缺少逗号，导致构造函数参数传递错误，所以user实例的属性全为undefined；
2. Redux状态要求存储可序列化的值，而User类的实例是带原型链的对象，不属于可序列化范畴，这才是核心报错原因。

下面是几种最佳处理方案：

方案一：直接存储普通对象（推荐，最简单） #

放弃使用User类实例，转而存储普通JSON对象，同时调整类型定义：

首先定义User接口代替类：

export interface User {
  name: string;
  email: string;
  token: string;
}

// 原Account类也可换成接口，或保留类但状态中不用它
export interface Account {
  id: number;
  user: User;
}

然后修改状态接口和reducer：

interface AccountState {
  id: string;
  user?: User;
}

const accountSlice = createSlice({
  name: 'account',
  initialState,
  reducers: {
    setAccount(state, action) {
      state.id = action.payload.id;
      // 直接存储普通对象，无需new User
      state.user = {
        name: action.payload.name,
        email: action.payload.email,
        token: action.payload.token
      };
      // 如果payload本身包含完整user对象，可简化为：
      // state.user = action.payload.user;
    },
  }
})

这种方案符合Redux序列化要求，实现成本最低，适合用户状态逻辑不复杂的场景。

方案二：拆分独立的userSlice（适合复杂状态场景） #

如果用户相关状态有独立的更新逻辑（比如修改用户名、刷新token等），拆分出单独的userSlice是合理的，符合Redux单一职责原则。

步骤1：创建userSlice #

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { User } from './your-types';

const userSlice = createSlice({
  name: 'user',
  initialState: {} as User, // 或设置初始空值：{ name: '', email: '', token: '' }
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      // 直接替换整个user状态，或逐个属性赋值
      return action.payload;
    },
    updateUserName: (state, action: PayloadAction<string>) => {
      state.name = action.payload;
    }
  }
});

export const { setUser, updateUserName } = userSlice.actions;
export default userSlice.reducer;

步骤2：联动更新状态 #

因为slice的reducers是同步纯函数，无法直接在accountSlice的reducer里调用userSlice的action，有两种处理方式：

• 组件中同时dispatch两个action：

  // 组件内代码
  import { useDispatch } from 'react-redux';
  import { setAccount } from './accountSlice';
  import { setUser } from './userSlice';
  
  const dispatch = useDispatch();
  
  const handleSetAccount = (payload) => {
    dispatch(setAccount(payload.id));
    dispatch(setUser({
      name: payload.name,
      email: payload.email,
      token: payload.token
    }));
  };
  

• 用thunk封装联动逻辑：
  若需要异步操作或更复杂的联动，使用createAsyncThunk：

  import { createAsyncThunk } from '@reduxjs/toolkit';
  import { setAccountId } from './accountSlice';
  import { setUser } from './userSlice';
  
  export const setFullAccount = createAsyncThunk(
    'account/setFullAccount',
    async (payload, { dispatch }) => {
      dispatch(setAccountId(payload.id));
      dispatch(setUser({
        name: payload.name,
        email: payload.email,
        token: payload.token
      }));
    }
  );
  
  // 在accountSlice中用extraReducers处理thunk状态（如加载中）
  const accountSlice = createSlice({
    name: 'account',
    initialState: { id: '', loading: false },
    reducers: {
      setAccountId: (state, action) => {
        state.id = action.payload;
      }
    },
    extraReducers: (builder) => {
      builder
        .addCase(setFullAccount.pending, (state) => {
          state.loading = true;
        })
        .addCase(setFullAccount.fulfilled, (state) => {
          state.loading = false;
        });
    }
  });
  

方案三：禁用序列化检查（不推荐） #

可以在configureStore中关闭Redux Toolkit的序列化检查，但这会掩盖其他潜在的非序列化值问题，仅建议在特殊场景下临时使用：

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    account: accountSlice.reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    })
});

内容的提问来源于stack exchange，提问作者Jesus Almaral - Hackaprende