Redux Slice中条件式修改状态失败，求排查与解决

需求：在Redux Slice中处理状态逻辑——当payload对应的对象已存在于store时，修改其value字段；若不存在则添加该对象。

示例payload：

{
  "unix": 1667500191,
  "type": "lunch",
  "order": 2,
  "value": "gulash"
}

场景：管理员修改输入框值时，通过reducer捕获值，判断目标对象是否存在：存在则更新value，不存在则新增条目。

当前Slice代码（无法正常工作）：

import { createSlice } from "@reduxjs/toolkit";

const initialState = [];

export const menuSlice = createSlice({
  name: "menu",
  initialState,
  reducers: {
    add: (state, action) => {
      const { order, type, value } = action.payload;

      let newState = [...state, action.payload];

      newState?.map((item, i) => {
        if (item.type === type && item.order === order) {
          newState[i].value = value;
        }
      });

      return newState;
    },
  },
});

export const { add, remove } = menuSlice.actions;

export default menuSlice.reducer;

核心问题 #

你的代码逻辑顺序错误：先将新payload添加到数组，再遍历修改已有条目，这会导致每次操作都先新增一个对象，再修改之前存在的匹配项（如果有的话），最终数组中会出现重复条目。此外，用map方法做遍历修改不符合其语义（map用于生成新数组，而非原地修改）。

修正后的代码 #

import { createSlice } from "@reduxjs/toolkit";

const initialState = [];

export const menuSlice = createSlice({
  name: "menu",
  initialState,
  reducers: {
    addOrUpdate: (state, action) => {
      const { order, type } = action.payload;
      // 查找是否存在type和order匹配的条目
      const existingIndex = state.findIndex(item => item.type === type && item.order === order);
      
      if (existingIndex !== -1) {
        // 存在则更新对应条目的value
        state[existingIndex].value = action.payload.value;
      } else {
        // 不存在则添加新条目
        state.push(action.payload);
      }
    },
  },
});

export const { addOrUpdate } = menuSlice.actions;
export default menuSlice.reducer;

关键修复说明 #

• 调整逻辑顺序：先检查是否存在匹配项，再决定更新或新增，避免重复添加
• 使用findIndex高效定位：直接找到目标对象的索引，比遍历修改更简洁高效
• 利用Redux Toolkit的Immer特性：无需手动复制数组（[...state]），直接修改state即可，Immer会自动处理不可变状态更新
• 语义化action命名（可选）：将add改为addOrUpdate更贴合实际功能，若需保留原名称，只需将reducer函数名改回add即可

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