Redux中如何更新嵌套对象属性？Reducer代码实现求助

嘿，我来帮你搞定Redux里嵌套对象属性更新的问题！首先得明确核心原则：Redux的reducer必须是纯函数，绝对不能直接修改原状态，得通过返回新对象/数组来实现状态更新。

假设你的Redux状态结构大概是这样的（和你描述的elements数组结构匹配）：

const initialState = {
  elements: [
    {
      id: 'elem_1',
      style: {
        fontSize: '16px',
        color: '#222',
        fontWeight: 'normal'
      },
      // 其他元素属性比如type、content之类的
    },
    // 更多元素...
  ]
};

而你的action creator已经能生成包含id（目标元素ID）、property（要修改的样式属性，比如fontSize）、value（新值）的action，比如：

export const updateElementStyle = (id, property, value) => ({
  type: 'UPDATE_ELEMENT_STYLE',
  payload: { id, property, value }
});

接下来分两种场景给你写reducer代码：

原生Redux（手动处理不可变性） #

这种方式需要严格遵守不可变更新规则，用展开运算符(...)来复制原对象/数组，只修改目标部分：

const elementsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_ELEMENT_STYLE': {
      const { id, property, value } = action.payload;
      
      // 遍历elements数组，生成新数组
      const updatedElements = state.elements.map(element => {
        // 不是目标元素的话直接返回原对象，避免不必要的复制
        if (element.id !== id) {
          return element;
        }
        
        // 是目标元素的话，创建新的元素对象：
        // 1. 展开原元素的所有属性
        // 2. 重写style属性：展开原style，再覆盖指定的property
        return {
          ...element,
          style: {
            ...element.style,
            [property]: value // 用计算属性名动态设置样式属性
          }
        };
      });
      
      // 返回新的state对象，替换elements为更新后的数组
      return {
        ...state,
        elements: updatedElements
      };
    }
    default:
      return state;
  }
};

关键要点： #

• 用map遍历数组：map会返回新数组，不会修改原数组
• 计算属性名[property]：允许你动态设置对象的属性键，完美适配你“根据选中的属性修改”的需求
• 只更新必要部分：非目标元素直接返回原对象，减少不必要的内存开销

Redux Toolkit（官方推荐，更简洁） #

如果你用Redux Toolkit（现在官方强烈推荐的开发方式），可以借助它内置的Immer库，直接写“看起来像修改原状态”的代码，Immer会自动帮你转换成不可变更新，代码简洁很多：

首先安装Redux Toolkit（如果还没装的话）：

npm install @reduxjs/toolkit

然后写slice：

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

const initialState = {
  elements: [/* 你的元素数组 */]
};

const elementsSlice = createSlice({
  name: 'elements',
  initialState,
  reducers: {
    // 这里的reducer函数可以直接“修改”状态，Immer会处理不可变性
    updateElementStyle: (state, action) => {
      const { id, property, value } = action.payload;
      // 找到目标元素
      const targetElement = state.elements.find(elem => elem.id === id);
      // 如果找到元素，直接修改对应的样式属性
      if (targetElement) {
        targetElement.style[property] = value;
      }
    }
  }
});

// 导出action creator（Redux Toolkit自动帮你生成）
export const { updateElementStyle } = elementsSlice.actions;
// 导出reducer
export default elementsSlice.reducer;

这种方式代码量少了很多，而且不用手动处理展开运算符，出错概率更低，非常推荐使用！

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