Redux中如何获取存储在对象内的上一个历史状态值？

方案1：修改 Reducer 存储历史状态（多组件复用场景推荐） #

Redux 本身默认不会存储状态的历史值，你可以直接在 reducer 中新增字段存储上一次的 userStatus，修改后的代码如下：

import * as actionTypes from "../actions/types";
import { combineReducers } from "redux";
const initialState = {
  userStatus: { value: "unavailable", label: "Offline" },
  // 新增字段存储上一次的用户状态
  prevUserStatus: { value: "unavailable", label: "Offline" },
};
const user_reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SET_USER_STATUS:
      return {
        ...state,
        // 状态更新时把旧值赋值给 prevUserStatus
        prevUserStatus: state.userStatus,
        userStatus: action.payload,
      };
    default: {
      return state;
    }
  }
};

const rootReducer = combineReducers({
  user: user_reducer,
});
export default rootReducer;

之后在任意组件中都可以直接通过 useSelector 获取上一个状态：

const userPresence = useSelector((state) => state.user.userStatus);
const prevUserPresence = useSelector((state) => state.user.prevUserStatus);

该方案优势是无需在业务组件中重复实现缓存逻辑，全局所有组件都可以直接读取历史状态。

方案2：组件层通过 useRef 缓存（单组件使用场景推荐） #

如果你不想修改全局状态结构，可以只在需要用到上一个状态的组件中通过 useRef 做本地缓存，无需改动 reducer 代码：

import { useRef, useEffect } from 'react';
import { useSelector } from 'react-redux';

// 先获取当前用户状态
const userPresence = useSelector((state) => state.user.userStatus);
// 初始化ref存储上一个状态
const prevUserPresenceRef = useRef(userPresence);

// 监听当前状态变化，更新ref缓存的旧值
useEffect(() => {
  prevUserPresenceRef.current = userPresence;
}, [userPresence]);

// prevUserPresence 即为上一次的状态值
const prevUserPresence = prevUserPresenceRef.current;

该方案侵入性低，适合只有单个组件需要用到历史状态的场景。

注意事项 #

• 触发 SET_USER_STATUS 时传入的 payload 必须是新的对象，否则 useSelector 无法检测到引用类型的状态变化，会导致两种方案的更新逻辑失效。
• 方案2的 useEffect 依赖数组必须准确传入 userPresence，避免缓存值不更新。

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