RTK.configureStore中如何合并顶层reducer与slice生成的合并reducer

核心实现逻辑非常简单：先手动生成所有slice对应的聚合reducer，再在自定义顶层reducer中按需将逻辑委托给该聚合reducer即可，完整实现步骤如下：

步骤1：手动创建slice聚合reducer #

使用Redux Toolkit导出的combineReducers方法，预先生成所有slice的聚合根reducer，该逻辑与configureStore内部自动执行的slice聚合逻辑完全一致：

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { slice as fooSlice } from './foo/slices.js'
import { slice as barSlice } from './bar/slices.js'
import { persistenceActions, saveWorldState } from './persistence.js'

// 生成所有slice的聚合reducer
const combinedSliceReducer = combineReducers({
  foo: fooSlice.reducer,
  bar: barSlice.reducer
})

步骤2：编写自定义顶层reducer完成逻辑组合 #

在全局reducer中优先处理需要访问完整状态的全局action，剩余未匹配的action全部交给上述combinedSliceReducer处理即可。
注意：reducer必须是纯函数，禁止在reducer内部执行持久化写入、接口请求等副作用操作，示例中的saveWorldState如果包含IO操作，建议迁移到RTK Listener Middleware或异步中间件中处理，reducer仅负责状态修改逻辑

function globalStoreReducer(state, action) {
  switch (action.type) {
    case persistenceActions.save:
      // 此处编写需要访问完整state的顶层逻辑，若需要修改状态则返回新的state
      saveWorldState(state) // 此处仅为示例代码，不符合纯函数规范
      // 如果该action不需要继续传递给slice reducer，直接返回state即可
      // 如果需要slice也响应该action，替换为 return combinedSliceReducer(state, action)
      return state
    default:
      // 未匹配的action全部委托给slice聚合reducer处理
      return combinedSliceReducer(state, action)
  }
}

步骤3：传入configureStore使用 #

将组合完成的全局reducer直接传入configureStore的reducer字段即可：

export const store = configureStore({
  reducer: globalStoreReducer
})

补充说明 #

• 若需要重置整个store的状态，可在对应action的case分支中返回combinedSliceReducer(undefined, action)，即可触发所有slice reducer返回初始状态
• 若不需要修改全局状态，仅需要监听特定action触发副作用，推荐使用RTK内置的listener middleware实现，不需要自定义顶层reducer

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