如何从Reducer返回数组？及Reducer中数组状态更新的实现疑问

你当前的写法存在一个关键问题：你的state是一个包含items数组的对象，但在处理UPDATED_ITEMS动作时，错误地把数组形式的payload直接展开到了state对象里，这会导致state结构混乱，无法正确拿到更新后的数组。

让我一步步帮你修正：

问题根源 #

你原来的reducer代码：

return { ...state, ...action.payload }

当action.payload是数组（比如[{ name: "bob"}, { name: "harry" }]）时，展开数组到对象中会把数组的索引作为对象的键，最终你的state会变成这样：

{
  items: [],
  0: { name: "bob" },
  1: { name: "harry" }
}

这显然不是你想要的结构——state.items还是空数组，而新增了多余的索引键值对。

正确的解决方案 #

根据你的需求，分两种情况处理：

1. 直接替换整个items数组

如果action.payload是完整的新列表，直接把它赋值给state.items即可，同时保持state的其他字段不变（通过展开原state）：

const initialState = { items: [] };
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATED_ITEMS':
      return { 
        ...state, // 保留原state的其他字段（如果有的话）
        items: action.payload // 替换items数组为新的payload数组
      };
    default:
      return state;
  }
};

2. 追加新元素到现有数组

如果你的需求是把payload里的元素追加到原数组后面（而不是替换），可以用展开运算符合并数组：

case 'UPDATED_ITEMS':
  return {
    ...state,
    items: [...state.items, ...action.payload] // 合并原数组和新数组元素
  };

这种写法符合Redux的不可变数据原则——不会修改原state数组，而是返回一个全新的数组。

对应的mapStateToProps写法 #

确保你在mapStateToProps里正确获取state.items：

const mapStateToProps = (state) => {
  return {
    items: state.items // 这里就能拿到更新后的数组了
  };
};

总结一下：你的state是一个包含数组的对象，更新时要精准修改items字段，而不是把数组直接展开到state对象中。始终记住Redux要求状态更新必须返回新的对象/数组，不能直接修改原状态。

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