无需扩展运算符，如何在Redux中更新深度嵌套状态对象？

一、修复Immutable.js用法解决错误 #

你碰到的state.setIn is not a function错误，是因为在START_LOADING分支里，用扩展运算符{ ...x }把Immutable对象转成了普通JS对象，导致返回的state不再是完整的Immutable Map，丢失了Immutable的方法。

修复后的完整reducer代码：

import { fromJS } from "immutable";

const InitialState = fromJS({
    data: { /* 你的初始数据 */ },
    meta: {
        session: { user: {} },
        loading: false,
        error: "",
    },
});

function StoreReducer(state = InitialState, action) {
  switch (action.type) {
    case START_LOADING: 
      // 用Immutable的setIn直接更新指定路径，保持状态的Immutable结构
      return state.setIn(["meta", "loading"], true);

    case ADD_DATA: {
      const keys = action.payload.keys;
      // 拼接完整路径（如果keys是指向data下的节点，需要加上"data"前缀）
      const fullPath = ["data", ...keys];
      // 用setIn替换目标节点，注意把新数据转成Immutable结构
      return state.setIn(fullPath, fromJS(action.payload.data));
    }
    // 必须保留default分支返回原状态
    default:
      return state;
  }
}

二、纯JS实现动态路径不可变更新（无需Immutable.js） #

如果不想依赖Immutable.js，可以写一个工具函数，手动实现不可变的深层更新：

工具函数代码 #

// 不可变更新深层嵌套对象的工具函数
function updateNestedState(originalState, pathArray, newValue) {
  // 复制顶层状态对象
  const newState = { ...originalState };
  let currentLayer = newState;

  // 遍历路径数组，除最后一个键，逐层复制对象
  for (let i = 0; i < pathArray.length - 1; i++) {
    const key = pathArray[i];
    // 确保当前层级是新对象，避免修改原状态
    currentLayer[key] = { ...currentLayer[key] };
    currentLayer = currentLayer[key];
  }

  // 更新最后一个键对应的值
  const lastKey = pathArray[pathArray.length - 1];
  currentLayer[lastKey] = newValue;

  return newState;
}

在reducer中使用 #

// 初始状态用普通JS对象
const initialState = {
  data: { /* 你的初始数据 */ },
  meta: {
    session: { user: {} },
    loading: false,
    error: "",
  },
};

function StoreReducer(state = initialState, action) {
  switch (action.type) {
    case START_LOADING: 
      return {
        ...state,
        meta: {
          ...state.meta,
          loading: true
        }
      };

    case ADD_DATA: {
      const keys = action.payload.keys;
      // 拼接完整路径（根据实际需求调整，比如不需要"data"前缀则直接用keys）
      const fullPath = ["data", ...keys];
      return updateNestedState(state, fullPath, action.payload.data);
    }
    default:
      return state;
  }
}

注意事项 #

• 如果你的路径数组是直接指向state根节点下的字段（比如要更新meta.session.user），则不需要添加"data"前缀，直接传入对应的路径数组即可。
• 工具函数仅针对对象结构，如果路径中包含数组，需要额外处理数组的不可变更新（比如用[...array]复制数组后再修改）。

内容的提问来源于stack exchange，提问作者Hard Code Programmer