已集成redux-persist，向Redux数组push新值后刷新为何丢失新值？

问题根源 #

你的reducer里用了stepDetails.push(action.payload)，这是直接修改原数组的可变操作。Redux本身要求reducer是纯函数，不能修改原状态；更关键的是，多数Redux持久化工具是通过检测状态引用的变化来判断是否需要保存新状态的——你push新元素后，数组的引用还是原来的那个，持久化工具会认为状态没有更新，自然不会把新元素存入持久化存储，刷新页面后就只能加载初始的默认数组。

而你提到的赋值操作（stepDetails=action.payload）会直接替换整个数组，生成新的引用，持久化工具能检测到这个变化，所以能正常保存和恢复状态。

修复方案 #

必须用不可变的方式更新数组，返回一个新的数组实例，而不是修改原数组。常用的方式有三种：

1. 使用扩展运算符（推荐，写法简洁）

const addStepReducer = (
  stepDetails = [
    {
      stepId: "001",
      stepTitle: "Step Name",
      stepDescription:"Step Desc",
    },
  ],
  action
) => {
  if (action.type === "ADD_STEP") {
    // 生成新数组：原数组元素 + 新元素
    return [...stepDetails, action.payload];
  }

  return stepDetails;
};

2. 使用concat方法（返回新数组，不修改原数组）

if (action.type === "ADD_STEP") {
  return stepDetails.concat(action.payload);
}

3. 使用slice+push（先复制原数组，再修改副本）

if (action.type === "ADD_STEP") {
  const newStepDetails = stepDetails.slice(); // 复制原数组
  newStepDetails.push(action.payload);
  return newStepDetails;
}

关键提醒 #

不管用哪种方式，核心都是返回一个新的数组引用，让持久化工具能识别到状态发生了变化，从而把更新后的数组存入持久化存储。这样刷新页面后，持久化工具就能正确恢复包含新元素的数组了。

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