如何从其他Redux Action访问旧状态并重置至指定历史状态？

好问题！默认情况下，Redux 的 reducer 确实只能拿到当前的 state和触发的 action，没办法直接获取某个历史 action 对应的旧 state 对象。不过要实现「重置到生命周期中某个 action 对应的状态」这个需求，我们可以自己手动维护状态的历史快照来解决。

核心思路 #

Redux 本身不会自动保存状态的历史版本，所以我们需要：

• 在 state 结构中添加一个存储历史快照的数组
• 每次 reducer 生成新 state 时，将新 state 的副本存入这个数组
• 新增一个专门的 action，用来触发「回退到指定历史快照」的操作

具体实现步骤 #

1. 扩展初始 state 结构 #

给你的 state 增加一个 stateHistory 字段，用来保存每次更新后的状态快照。初始时要存入初始状态的副本：

const initialState = {
  // 你的业务状态字段
  count: 0,
  // 历史状态快照数组
  stateHistory: [{ count: 0 }]
};

2. 在 reducer 中维护历史快照 #

每次处理完 action 生成新 state 后，把新 state 的深拷贝添加到 stateHistory 中（注意必须是深拷贝，否则后续修改会影响已保存的历史快照）：

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': {
      const newState = {
        ...state,
        count: state.count + 1
      };
      // 生成新的历史快照数组，添加新状态
      return {
        ...newState,
        stateHistory: [...state.stateHistory, { ...newState }]
      };
    }
    case 'DECREMENT': {
      const newState = {
        ...state,
        count: state.count - 1
      };
      return {
        ...newState,
        stateHistory: [...state.stateHistory, { ...newState }]
      };
    }
    // 处理重置到历史状态的action
    case 'RESET_TO_HISTORY_STATE': {
      // 根据传入的索引获取目标快照
      const targetSnapshot = state.stateHistory[action.payload.index];
      // 如果找不到快照，直接返回当前state
      if (!targetSnapshot) return state;
      // 返回目标快照，同时可以选择截断历史记录到该点（也可以保留全部历史，看需求）
      return {
        ...targetSnapshot,
        stateHistory: state.stateHistory.slice(0, action.payload.index + 1)
      };
    }
    default:
      return state;
  }
}

3. 触发重置操作 #

在组件中，当需要回退到某个历史状态时，dispatch 对应的 action 即可：

// 比如回退到第1个action对应的状态（索引为1，因为初始快照索引是0）
dispatch({
  type: 'RESET_TO_HISTORY_STATE',
  payload: { index: 1 }
});

优化建议（使用Redux Toolkit） #

如果你用的是现在官方推荐的 Redux Toolkit，可以借助 createSlice 和 Immer 来简化代码，Immer 会自动处理不可变数据，不需要手动深拷贝：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  count: 0,
  stateHistory: [{ count: 0 }]
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
      // Immer会自动生成新state的副本，直接push到历史数组即可
      state.stateHistory.push({ ...state });
    },
    decrement: (state) => {
      state.count -= 1;
      state.stateHistory.push({ ...state });
    },
    resetToHistory: (state, action) => {
      const targetSnapshot = state.stateHistory[action.payload.index];
      if (targetSnapshot) {
        // 直接替换当前状态为快照内容
        state.count = targetSnapshot.count;
        // 截断历史记录
        state.stateHistory = state.stateHistory.slice(0, action.payload.index + 1);
      }
    }
  }
});

export const { increment, decrement, resetToHistory } = counterSlice.actions;
export default counterSlice.reducer;

注意事项 #

• 深拷贝问题：如果你的 state 包含嵌套对象、Date、正则或函数，{ ...state } 这种浅拷贝会失效，这时候可以使用 lodash.cloneDeep 或者依赖 Immer 来处理（Redux Toolkit 内置了 Immer）。
• 内存占用：如果状态很大或者快照数量过多，会占用较多内存，建议设置快照的最大长度（比如只保留最近50个），超过时移除最早的快照。
• 快照标识：除了用索引定位快照，你也可以在快照中保存对应的 action type 或自定义 ID，这样可以更灵活地回退到特定类型的 action 对应的状态（比如回退到最后一次 INITIALIZE action 的状态）。

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