NgRx技术问题：循环数组时清空状态中所有待办项的count属性

现有代码的核心问题 #

• 错误引用状态结构：你的原始状态里并没有todos这个顶层属性，直接是todo1、todo2、todo3作为根级键，但代码里却一直在访问state.todos，导致无法正确定位目标对象。
• 循环更新依赖原始状态：forEach循环中每次创建newState时，都是基于最初的state而非上一次更新后的newState，前面的修改会被覆盖，最终只有最后一个待办项的count会生效。
• 返回原始状态：函数最后返回的是未修改的state，而非更新后的newState，导致Redux Store完全不会更新。
• 原始状态语法错误：你给出的状态结构存在语法问题，每个todo对象里的{ id: x, name: 'todoX' }是无效写法，应合并为一个对象，比如"todo1": { id: 1, name: 'todo1', count: "3" }。

修正后的代码 #

on(ClearCountValueForAll, (state, payload) => {
  // 基于原始状态创建新的状态对象
  let newState = { ...state };
  
  payload.todos.forEach(item => {
    // 基于当前newState更新，而非原始state
    newState = {
      ...newState,
      [item]: {
        ...newState[item],
        count: 0 // 重置count为0，若需保持字符串类型可改为"0"
      }
    };
  });
  
  console.log(newState);
  // 返回修改后的新状态
  return newState;
});

更简洁的写法（可选） #

可以用reduce一次性处理所有待办项，避免循环中的重复赋值：

on(ClearCountValueForAll, (state, payload) => {
  const updatedItems = payload.todos.reduce((acc, item) => {
    acc[item] = { ...state[item], count: 0 };
    return acc;
  }, {});
  
  return { ...state, ...updatedItems };
});

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