React Redux中如何通过字符串路径操作Store嵌套对象？

首先明确：Redux的Reducer必须是纯函数，绝对不能直接修改原state对象，你原来的state[place].value = value写法违反了这个规则，会导致Redux无法正确检测状态变化。正确的做法是基于原state创建新的状态副本，仅修改目标路径的属性。

1. 实现路径解析与状态更新工具函数 #

我们可以写一个纯函数，接收原对象、路径字符串和要更新的值，返回新的对象：

// 工具函数：根据路径更新对象属性，返回新对象
const updateStateByPath = (originalState, path, newValue) => {
  // 将路径字符串拆分为层级数组，比如"a.b" → ["a", "b"]
  const pathSegments = path.split('.');
  
  // 递归创建新对象，逐层深入直到目标节点
  const updateRecursive = (currentObj, segments) => {
    // 如果已经到最后一层，返回包含新value的对象
    if (segments.length === 1) {
      return {
        ...currentObj,
        value: newValue
      };
    }
    
    // 取出当前层级的key
    const currentKey = segments[0];
    // 递归处理剩余路径
    const updatedChild = updateRecursive(currentObj[currentKey], segments.slice(1));
    
    // 返回当前层级的新对象，保持其他属性不变
    return {
      ...currentObj,
      [currentKey]: updatedChild
    };
  };
  
  // 从根state开始递归更新
  return updateRecursive(originalState, pathSegments);
};

2. 在Reducer中使用该工具函数 #

修改你的Reducer逻辑，调用上面的工具函数生成新状态：

const initialState = {
    a: {
        b: { value: "" }
    },
    c: { 
        d: { value: "" }
    }
};

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'DO_SOMETHING': {
      const { value, place } = action.payload;
      // 调用工具函数生成新状态，直接返回
      return updateStateByPath(state, place, value);
    }
    // 其他case...
    default:
      return state;
  }
};

3. 组件中分发Action的写法保持不变 #

你原来的Action分发逻辑不需要修改：

dispatch({
  type: 'DO_SOMETHING',
  payload: { value: 'my-value', place: "a.b" }
});
// 如果用createAction的话：
// const doSomething = createAction('DO_SOMETHING');
// dispatch(doSomething({ value: 'my-value', place: "a.b" }));

关键说明 #

• 这个方法不需要写任何分支判断，只要路径字符串和state结构匹配，就能正确更新目标属性
• 工具函数是纯函数，仅修改路径指定的层级，其他部分保持引用不变，比全量深拷贝性能更好
• 严格遵守了Redux的纯函数要求，确保状态变化可追踪、可预测

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