React-Redux中dispatch更新token时如何保留原有状态？

你遇到的问题是因为setAuth对应的reducer直接用新payload替换了整个auth状态，导致原有属性被覆盖。以下是两种解决思路：

方法一：修改authSlice的reducer（推荐） #

在你的authSlice中，找到setAuth对应的reducer逻辑，将直接替换状态改为合并新旧状态：

// features/auth/authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  // 你的初始状态属性，比如userInfo, accessToken, refreshToken等
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuth: (state, action) => {
      // 用扩展运算符合并现有状态和新的payload数据
      return { ...state, ...action.payload };
      // 也可以用Immer的直接修改写法（Redux Toolkit默认启用Immer）：
      // Object.assign(state, action.payload);
    },
    // 其他reducers...
  }
});

export const { setAuth } = authSlice.actions;
export default authSlice.reducer;

这样不管你dispatch的payload里有哪些字段，都会只更新对应字段，保留原有状态的其他属性。

方法二：在dispatch时合并当前状态 #

如果你暂时不想修改slice的reducer，可以在useRefreshToken钩子中先获取当前的auth状态，合并后再dispatch：

import axios from "axios";
import { AppDispatch } from "../store";
import { useDispatch, useSelector } from "react-redux";
import { setAuth, selectAuth } from "../features/auth/authSlice"; // 引入状态选择器

const useRefreshToken = () => {
  const dispatch: AppDispatch = useDispatch();
  const currentAuth = useSelector(selectAuth); // 获取当前auth状态

  const refresh = async () => {
    const response = await axios.get("http://localhost:80/auth/refresh", {
      withCredentials: true,
    });
    
    // 合并当前状态和新的token数据
    dispatch(setAuth({ ...currentAuth, ...response.data }));
    return response.data.accessToken;
  };
  return refresh;
};

export default useRefreshToken;

注意事项 #

• 优先选择方法一，状态更新逻辑统一放在reducer中，更符合Redux的设计规范，避免组件中分散处理状态合并。
• 确保response.data仅包含需要更新的字段（比如accessToken），避免意外覆盖其他属性。

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