Redux Toolkit中数组状态定义失败及push报错问题求助

错误点说明 #

1. 多余的空值判断：if(!state) 完全无效，因为初始状态是明确的空数组，在JavaScript中空数组属于真值，这个分支永远不会执行。
2. 错误覆盖state类型：state.map = (user)=>{...} 直接给数组类型的state赋值了一个函数，彻底改变了state的类型，导致后续state变成never类型，自然不存在push方法。同时map的用法完全错误——map是返回新数组的纯函数，不能用来修改原数组元素。
3. 逻辑实现错误：你想要的是“存在相同id则替换，不存在则添加”，但当前代码完全没实现这个逻辑。

正确的实现方式 #

第一步：正确定义初始状态 #

初始状态的类型断言写法没问题，也可以更明确地提前声明：

const initialState: LuxmedBenefitUserType[] = [];

export const addEditLuxmedBenefitSystemsSlice = createSlice({
  name: 'addEditLuxmedSlice',
  initialState,
  reducers: {
    // ... 修正后的reducer
  },
});

第二步：修正addEditBenefits reducer逻辑 #

实现“存在则替换，不存在则添加”的正确逻辑：

addEditBenefits: (state, action: PayloadAction<LuxmedBenefitUserType>) => {
  const { id } = action.payload;
  // 查找是否存在对应id的元素
  const existingIndex = state.findIndex(user => user.id === id);
  
  if (existingIndex !== -1) {
    // 存在则替换
    state[existingIndex] = action.payload;
  } else {
    // 不存在则添加
    state.push(action.payload);
  }
},

完整修正后的代码 #

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

export type LuxmedBenefitUserType = {
  id: number;
  name: string;
  lastName: string;
  profileName: string;
  contractForm: string;
  userRelation: string;
  offerType: string;
  totalPrice: number;
  employerCost: number;
  employeeCost: number;
};

const initialState: LuxmedBenefitUserType[] = [];

export const addEditLuxmedBenefitSystemsSlice = createSlice({
  name: 'addEditLuxmedSlice',
  initialState,
  reducers: {
    addEditBenefits: (state, action: PayloadAction<LuxmedBenefitUserType>) => {
      const { id } = action.payload;
      const existingIndex = state.findIndex(user => user.id === id);
      
      if (existingIndex !== -1) {
        state[existingIndex] = action.payload;
      } else {
        state.push(action.payload);
      }
    },
  },
});

// 导出action和reducer
export const { addEditBenefits } = addEditLuxmedBenefitSystemsSlice.actions;
export default addEditLuxmedBenefitSystemsSlice.reducer;

额外说明 #

• Redux Toolkit的createSlice允许直接修改state（内部通过Immer实现不可变更新），所以直接使用state.push或修改数组元素是合法的。
• 必须给action指定PayloadAction类型（从@reduxjs/toolkit导入），这样TS才能正确推断action.payload的类型，避免类型错误。

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