将顶级减速器与切片减速器相结合，RTK.configureStore

Question

如何将顶级reducer代码与来自combineReducers的聚合reducer结合起来？

我已经定义了几个商店切片。 combineReducers 允许通过将名称映射到每个切片的缩减器来创建单个缩减器：

import { slice as fooSlice } from './foo/slices.js'
import { slice as barSlice } from './bar/slices.js'

export const store = RTK.configureStore({
    reducer: {
        foo: fooSlice.reducer,
        bar: barSlice.reducer,
    },
})

根据 createSlice 的设计，每个 reducer 都可以只访问它们自己的状态子集。

然后，我还需要一些顶级 reducer 代码。例如，“保存到持久存储”操作：

import {
    persistenceActions,
    saveWorldState,
} from './persistence.js'


function globalStoreReducer(state, action) {
    switch (action.type) {
        [persistenceActions.save]: {
            saveWorldState(state)
        },
    default:
        // FIXME: How to delegate to the slice reducers?
        return reducer(state, action)
    }
    return state
}

目标是拥有一个单一的 reducer 函数，它不仅结合了所有切片 reducer，而且结合了可以访问整个商店的顶级 reducer。然后，将其用于 RTK.configureStore:

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

我如何正确地将直接实现的 reducer 代码与合并的 reducer 结合起来，用作 RTK.configureStore 中的单个 reducer？

Answer 1

你会做一个

const allMySliceReducersReducer = combineReducers({
        foo: fooSlice.reducer,
        bar: barSlice.reducer,
    })

然后从您的 globalStoreReducer.

调用它

但话虽如此，saveWorldState 听起来像是一种副作用，而这些在 reducer 中是绝对不允许的。

将顶级减速器与切片减速器相结合，RTK.configureStore

Combine top-level reducer with slice reducers, for RTK.configureStore

redux-toolkit