Redux中如何存储多个对象？解决新对象覆盖旧值问题

当前Reducer中处理LOAD_PLANET_NAME动作时，直接将homeworld字段赋值为最新传入的action.data，属于单值覆盖逻辑，每触发一次动作就会替换该字段的原有值，自然只会保留最后一次传入的对象，无法存储所有历史数据。

当前运行效果参考：

原有Action层代码逻辑正确，无需调整，仅需修改Reducer相关逻辑即可解决覆盖问题。

核心调整是把homeworld的存储结构从单个对象改为数组，每次新数据传入时追加到数组中，而非直接覆盖字段。

1. 修正初始状态定义 #

注意你原有代码里的初始状态变量名存在拼写错误（initianalState应为initialState），同时将homeworld初始化为空数组用于承载多对象：

const initialState = {
  homeworld: []
};

2. 调整Reducer赋值逻辑 #

保留原有状态展开的写法，将homeworld的赋值改为基于原数组追加新值：

export const WorldReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOAD_PLANET_NAME: {
      return {
        ...state,
        homeworld: [...state.homeworld, action.data]
      };
    }
    default: return state;
  }
};

可选扩展：重复数据过滤 #

如果待存储的星球对象存在唯一标识（比如id字段），不希望存储重复数据，可以在追加前做存在性判断：

case LOAD_PLANET_NAME: {
  const alreadyStored = state.homeworld.some(planet => planet.id === action.data.id);
  return {
    ...state,
    homeworld: alreadyStored ? state.homeworld : [...state.homeworld, action.data]
  };
}

调整后所有传入的星球对象都会按传入顺序完整保存在state.homeworld数组中，不会再出现新数据覆盖旧数据的问题。

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