TypeScript中Redux数组对象更新：解决Proxy访问无法查找的问题

Redux Toolkit里的state是Immer包装的Proxy对象，控制台显示Proxy(Array)是正常现象——这是Immer用来实现「可变写法做不可变更新」的机制，不用把它转成普通数组再操作，直接按常规数组逻辑修改就行。

正确编写updateItem reducer #

假设你要根据Id匹配更新数组里的对象，或者不存在就添加，代码可以这么写：

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

interface iItem {
  Category: string;
  Id: string;
}

interface iDataState {
  Items: Array<iItem>;
}

const initialState: iDataState = {
  Items: [],
};

const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {
    updateItem: (state, action: PayloadAction<iItem>) => {
      // 找到目标项的索引
      const targetIndex = state.Items.findIndex(item => item.Id === action.payload.Id);
      
      if (targetIndex !== -1) {
        // 存在则替换
        state.Items[targetIndex] = action.payload;
      } else {
        // 不存在则追加（按需选择）
        state.Items.push(action.payload);
      }
    },
  },
});

export const { updateItem } = dataSlice.actions;
export default dataSlice.reducer;

关于Proxy的说明 #

Immer会把state包装成Proxy，让你可以用state.Items[xxx] = ...或者push这种「可变」写法，底层自动转换成符合Redux要求的不可变更新。你完全不需要手动处理Proxy，直接操作state.Items即可。

如果想在控制台看真实的数组内容，可以用console.log(JSON.parse(JSON.stringify(state.Items)))，但开发中没必要这么做，按正常逻辑写更新代码就好。

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