如何在Redux的reducer中保存历史状态并追加当前新状态

问题原因 #

你当前的写法直接将items字段赋值为仅包含当前新元素的数组，完全覆盖了之前存储的历史内容，因此每次点击都只会保留最新数据。

解决方案 #

利用数组扩展运算符保留历史数据，再追加新元素即可，修改后的reducer代码如下：

const initialState = {
  items: [],
};

const basket = (state = initialState, action) => {
  if (action.type === "ADD_ITEM") {
    return {
      // 展开历史items的所有元素，再追加新元素
      items: [...state.items, action.data],
    };
  }
  return state;
};

export default basket;

注意事项 #

• 你在问题描述中提到新对象是通过action.payload传入reducer，如果实际项目中你的action传值字段为payload，把上述代码中的action.data替换为action.payload即可。
• 禁止直接修改原state，例如state.items.push(action.data)这类写法不符合Redux的不可变原则，会导致状态更新不生效、调试异常等问题，必须返回全新的状态对象。

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