大型模块化应用中适配Redux Toolkit的Redux最优使用方案咨询

目前针对你的需求，最优方案是直接使用Redux Toolkit原生能力实现reducer的动态注入与移除，无需依赖已停止维护的第三方库。

实现思路 #

• 全局公共状态静态注册：鉴权、事件通知、全局消息这类需要全模块访问的状态，在store初始化时直接作为静态reducer注册，天然全局可访问
• 模块级状态动态管理：每个独立模块的状态分片，在模块激活/懒加载完成时注入到根store，在模块失活/卸载时从根store移除，完全匹配你的动态分片需求

具体实现步骤 #

1. 配置支持动态注入的store #

import { configureStore, combineReducers } from '@reduxjs/toolkit'
// 引入全局公共状态的reducer
import { authReducer } from './features/auth/authSlice'
import { notificationReducer } from './features/notification/notificationSlice'
import { messageReducer } from './features/message/messageSlice'

// 初始静态reducer，仅包含全局公共状态
const staticReducers = {
  auth: authReducer,
  notification: notificationReducer,
  message: messageReducer
}

// 维护动态注入的reducer映射表
const asyncReducers: Record<string, any> = {}

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

// 初始化store
export const store = configureStore({
  reducer: createRootReducer()
})

// 扩展动态注入reducer方法
export function injectReducer(moduleKey: string, reducer: any) {
  // 避免重复注入
  if (asyncReducers[moduleKey]) return
  asyncReducers[moduleKey] = reducer
  // 替换根reducer完成注入
  store.replaceReducer(createRootReducer())
}

// 扩展移除reducer方法
export function ejectReducer(moduleKey: string) {
  if (!asyncReducers[moduleKey]) return
  delete asyncReducers[moduleKey]
  store.replaceReducer(createRootReducer())
}

2. 懒加载模块时注入对应状态分片 #

以React + React Router的懒加载场景为例：

import { lazy, useEffect } from 'react'
import { useRoutes } from 'react-router-dom'
import { injectReducer, ejectReducer } from './store'

// 懒加载订单模块，加载完成时注入订单分片reducer
const OrderModule = lazy(() => {
  import('./features/order/orderSlice').then(sliceRes => {
    injectReducer('order', sliceRes.default)
  })
  return import('./features/order')
})

// 模块卸载时移除对应状态分片
const OrderModuleWrapper = () => {
  useEffect(() => {
    return () => ejectReducer('order')
  }, [])
  return <OrderModule />
}

// 路由配置
export const AppRoutes = () => {
  return useRoutes([
    { path: '/order/*', element: <OrderModuleWrapper /> },
    // 其他业务模块路由配置
  ])
}

方案优势 #

• 完全原生适配Redux Toolkit，支持createSlice、createAsyncThunk、RTK Query等所有RTK特性，无额外适配成本
• 无第三方依赖，不存在开源库停止维护的风险，逻辑可控性高
• 完全匹配你的业务需求，可灵活控制状态分片的注入、移除时机，公共状态全局可访问，模块状态隔离管理
• 类型友好，配合TypeScript可以完整实现全局状态的类型提示，无类型丢失问题

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