如何在Redux reducer中修改对象数组指定索引的键值

要实现这个需求，核心要记住Redux的reducer必须是纯函数，绝对不能直接修改原状态（不可变性是Redux的核心原则）。我们需要创建原数组和对象的副本，在副本上修改后返回新状态。

基础实现方式（不依赖第三方库） #

首先，我们先定义对应的action类型和reducer逻辑：

// 初始状态
const initialState = {
  arrayObj: [
    {key1:'value1', key2:'value2'},
    {key1:'value1', key2:'value2'},
    {key1:'value1', key2:'value2'},
    {key1:'value1', key2:'value2'},
    {key1:'value1', key2:'value2'}
  ]
};

// Reducer函数
const myReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_ARRAY_ITEM': {
      // 从action的payload中取出需要的参数
      const { index, key, value } = action.payload;
      
      // 先做索引有效性检查，避免越界报错
      if (index < 0 || index >= state.arrayObj.length) {
        return state;
      }
      
      // 使用map创建新数组，只修改目标索引的对象
      const updatedArray = state.arrayObj.map((item, currentIndex) => {
        if (currentIndex === index) {
          // 用扩展运算符创建对象副本，更新指定键，保留其他原有属性
          return { ...item, [key]: value };
        }
        // 非目标项直接返回原对象（没必要创建副本，因为没修改）
        return item;
      });
      
      // 返回新的状态对象，保留原状态的其他属性
      return { ...state, arrayObj: updatedArray };
    }
    default:
      // 未知action类型时返回原状态
      return state;
  }
};

然后你可以通过dispatch这个action来触发更新：

// 传入索引2，键名key2，值hello
dispatch({
  type: 'UPDATE_ARRAY_ITEM',
  payload: { index: 2, key: 'key2', value: 'hello' }
});

简化实现（使用Immer库） #

如果你的状态结构比较复杂，手动写扩展运算符和map会很繁琐，可以用Immer库来简化代码。Immer允许你用"可变"的写法，但背后会自动生成不可变的状态，非常省心：

首先安装Immer：

npm install immer
# 或者用yarn
yarn add immer

然后修改reducer：

import { produce } from 'immer';

const myReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_ARRAY_ITEM': {
      const { index, key, value } = action.payload;
      
      if (index < 0 || index >= state.arrayObj.length) {
        return state;
      }
      
      // 使用produce包裹，直接修改draft对象即可
      return produce(state, draft => {
        draft.arrayObj[index][key] = value;
      });
    }
    default:
      return state;
  }
};

关键细节说明 #

• 不可变性：Redux要求每次更新必须返回新的状态，不能修改原state，所以我们用map生成新数组，用...扩展运算符生成新对象。
• 动态键名：用[key]这种计算属性名的方式，实现动态设置对象的键，这样不管传入什么键名都能适配。
• 索引检查：添加索引有效性判断是个好习惯，可以避免传入无效索引导致的错误。

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