如何移除Redux store中的slice/reducer释放无用状态内存

Redux 默认不会自动清理已挂载的Slice状态，针对注册流程这类用完即弃的业务模块，有两种成熟实现方案，按需选择即可：

方案1：重置Slice状态（实现简单，兼容所有Redux版本，绝大多数场景够用） #

核心逻辑是给Slice加专属的重置action，在组件确定不再渲染时触发，把状态恢复为初始值，释放旧状态占用的内存。

• 第一步：在注册模块的Slice中新增重置reducer，直接返回初始状态即可，以Redux Toolkit写法为例：

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

// 定义初始状态
const initialState = {
  currentStep: 1,
  registerForm: {},
  smsCodeStatus: 'idle',
  submitStatus: 'idle'
};

const registerSlice = createSlice({
  name: 'register',
  initialState,
  reducers: {
    // 其他业务reducer：更新步骤、存表单值、更新验证码状态等
    setRegisterStep: (state, action) => {
      state.currentStep = action.payload;
    },
    saveRegisterForm: (state, action) => {
      state.registerForm = {...state.registerForm, ...action.payload};
    },
    // 重置状态的reducer，直接返回初始值即可
    $resetRegisterState: () => initialState
  }
});

export const { setRegisterStep, saveRegisterForm, $resetRegisterState } = registerSlice.actions;
export default registerSlice.reducer;

• 第二步：在注册模块的卸载节点触发重置action。如果是单页路由的注册页，就在路由组件的卸载生命周期里触发；如果注册流程跨多个子组件，就在注册成功跳转出注册模块的节点触发，避免中途切步骤清空已填内容。
  函数组件写法示例：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { $resetRegisterState } from './registerSlice';

const RegisterEntry = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    return () => {
      // 组件卸载、离开注册模块时触发重置
      dispatch($resetRegisterState());
    }
  }, [dispatch]);

  // 注册模块路由、业务逻辑
  return <RegisterRouter />
}

注意：如果项目用了redux-persist做状态持久化，一定要把register这个Slice加到持久化黑名单里，不然重置后会被本地缓存的旧状态重新覆盖，等于白清。

方案2：动态挂载/移除Reducer（彻底从Store中删除Slice节点，适合全生命周期只访问一次的模块） #

如果注册模块用户大概率只会进一次，不需要常驻在Store里，可以用Redux原生支持的replaceReducer能力，进注册页的时候才注入对应Slice的reducer，离开的时候直接移除，对应的State节点会被完全回收，内存释放更彻底。

• 第一步：改造Store配置，扩展动态注入、移除Reducer的方法：

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import userReducer from './user/userSlice';
import appReducer from './app/appSlice';

// 全局常驻的静态reducer，比如登录态、全局配置这类全应用都要用的
const staticReducers = {
  user: userReducer,
  app: appReducer
};

// 动态生成根reducer
const createRootReducer = (asyncReducers = {}) => combineReducers({
  ...staticReducers,
  ...asyncReducers
});

export const store = configureStore({
  reducer: createRootReducer()
});

// 挂载动态reducer的容器
store.asyncReducers = {};

// 注入reducer方法
store.injectReducer = (sliceKey, reducer) => {
  if (Object.hasOwn(store.asyncReducers, sliceKey)) return;
  store.asyncReducers[sliceKey] = reducer;
  store.replaceReducer(createRootReducer(store.asyncReducers));
};

// 移除reducer方法
store.removeReducer = (sliceKey) => {
  if (!Object.hasOwn(store.asyncReducers, sliceKey)) return;
  delete store.asyncReducers[sliceKey];
  store.replaceReducer(createRootReducer(store.asyncReducers));
};

• 第二步：在注册模块的入口组件里，挂载时注入reducer，卸载时移除：

useEffect(() => {
  // 进入注册模块时注入register slice
  store.injectReducer('register', registerReducer);
  return () => {
    // 离开注册模块时直接移除，state里的register节点会被完全删除
    store.removeReducer('register');
  }
}, []);

注意：用这个方案要确保移除reducer之后，没有任何组件还在订阅register下的状态，否则会报找不到state的错误。

额外注意事项 #

• 如果注册流程里有未完成的异步请求，重置/移除Slice之前要把pending的请求abort掉，避免请求返回后尝试写入已回收的状态，造成隐性内存泄漏。
• 不要为了清注册状态直接重置整个Store，会把其他模块的登录态、全局配置等常驻状态全部清空，引发线上问题。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture