Redux Toolkit中extraReducer处理PURGE不触发重渲染问题排查

这个问题的核心在于你没遵循Redux Toolkit的Immer状态更新规则——直接替换state引用的操作不会被Immer追踪，自然也就触发不了Redux的状态变更检测和组件重渲染。

正确的状态重置方式 #

在extraReducers中处理PURGE动作时，你需要直接修改现有state对象的属性，而不是替换整个state引用。可以这样调整代码：

import { PURGE } from 'redux-persist/es/constants';
const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAccessToken(state: AuthState, action: PayloadAction<Auth>): void {
      state.accessToken = action.payload.accessToken;
      state.expiresIn = action.payload.expiresIn;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(PURGE, (state) => {
      // 方式1：逐个重置属性，直观清晰
      state.accessToken = initialState.accessToken;
      state.expiresIn = initialState.expiresIn;
      
      // 方式2：用Object.assign批量赋值，更简洁
      // Object.assign(state, initialState);
    });
  },
});

为什么之前的写法无效？ #

Redux Toolkit依赖Immer库处理不可变状态更新，它会把你的state包装成Proxy对象。当你执行state = initialState或者state = { ...initialState }时，只是替换了当前函数作用域内的state变量引用，并没有修改Immer包装的Proxy对象的内部属性——Immer完全没察觉到这次“更新”，所以不会生成新的状态快照，Redux也就不会触发组件重渲染。

而直接修改state.accessToken这类属性时，Immer会拦截到操作，自动生成不可变的新状态，Redux就能正确检测到状态变化了。

额外优化建议 #

1. 推荐使用builder语法编写extraReducers（如上例），这是Redux Toolkit官方推荐的写法，类型提示更准确，也避免了字符串索引的潜在问题。
2. 你之前定义的action: string类型是错误的，action应该是Redux的Action对象，正确的类型可以是Action<typeof PURGE>，或者直接省略类型让TypeScript自动推断。

这样修改后，你的PURGE动作就能正确更新auth状态，并且触发组件重渲染了。

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