如何根据Redux state中的mode值设计互斥模式对应的store结构？

你的场景下模式在应用加载完成后就完全固定、运行时不可变更，不需要复杂的动态reducer或多store方案，直接在store初始化阶段做条件挂载即可，从结构层面天然保证两种模式状态互斥，无冗余字段。

核心实现逻辑 #

将store状态拆分为两类独立管理：

• 公共状态：两种模式通用的状态，比如当前mode值、用户登录信息、全局配置等，全量挂载到store
• 模式专属状态：仅和当前选中模式相关的业务状态，初始化时根据用户选定的mode动态挂载对应reducer，未选中模式的reducer完全不会进入store结构

以官方推荐的Redux Toolkit写法为例，实现代码如下：

import { configureStore } from '@reduxjs/toolkit'
import commonReducer from './slices/common'
// 导入两种模式各自的专属状态切片
import modeAFeatureReducer from './slices/modeA'
import modeBFeatureReducer from './slices/modeB'

// 应用初始化阶段读取用户预先选定的模式，来源可以是本地存储、URL参数、启动配置接口等
const selectedMode = window.__APP_INIT_CONFIG__.mode

export const store = configureStore({
  reducer: {
    common: commonReducer,
    // 仅挂载当前模式对应的专属reducer，store中不会存在另一种模式的冗余状态
    feature: selectedMode === 'A' ? modeAFeatureReducer : modeBFeatureReducer
  }
})

配套优化 #

• 统一封装状态访问入口：把模式专属状态的读取封装成公共selector，业务层不需要感知当前模式，直接调用selector即可拿到对应结构的状态，不需要在组件里写重复的条件判断

  // store/selectors.js
  export const selectFeatureState = state => state.feature
  

• 复用公共逻辑：如果两种模式的状态切片存在重复的reducer逻辑，可以抽成高阶reducer工厂函数，传入不同的初始状态、差异化case处理即可生成对应模式的reducer，减少重复代码。

避坑说明 #

• 不要在每个组件、每个selector中零散写mode判断逻辑去读取不同位置的状态，这会导致逻辑散列、后续维护成本极高，也没法从根上解决冗余状态的问题
• 不需要使用store.replaceReducer这类运行时动态替换reducer的API，该能力主要用于代码分割场景下的reducer按需加载，你的场景mode初始化即固定，配置阶段的条件判断完全够用，无额外运行时开销
• 多store方案完全没必要，会导致Provider嵌套、跨store通信困难、DevTools调试混乱，属于典型的过度设计

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