replaceReducer on @reduxjs/toolkit

Question

虽然我是redux和RTK的新手，但我只是用RTK开始redux项目，就好像你现在用Spring Boot而不是Spring开始一样。

我想在redux工具包(RTK)上按需动态注入减速器。我意识到我need to keep track of current reducers来制作它。我本以为RTK的商店会有他们的参考，但不幸的是，它似乎没有这样的属性。

虽然我发现这个模块似乎可以完成任务，但我似乎必须回到RTK创建之前的日子才能让它工作。

import {createStore, createReducer, Slice, Reducer, AnyAction, combineReducers} from "@reduxjs/toolkit";
const Store = createStore<any, any, any, any>(createReducer({}, () => {}));
const reducers: {
[key: string]: Reducer<any, AnyAction>;
} = {};
export const injectReducer = (slice: Slice) => {
reducers[slice.name] = slice.reducer;
Store.replaceReducer(combineReducers(reducers));
};

甚至更多的(也许我只是不知道怎么做)类型定义会变得疯狂。

有什么办法做这个吗？

Answer 1

我遇到了同样的问题，最后用几行代码解决了它；

首先，我创建了商店：

const staticReducers = {
counter: counterReducerSlice,
};
export const store = configureStore({
reducer: staticReducers,
middleware: getDefaultMiddleware => [logger, ...getDefaultMiddleware()],
enhancers: compose([monitorReducerEnhancer]),
});

然后制作异步减速器目录：

store.asyncReducers = {};
store.injectReducer = (key, asyncReducer) => {
store.asyncReducers[key] = asyncReducer;
store.replaceReducer(createReducer(store.asyncReducers));
};
function createReducer(asyncReducers) {
return combineReducers({
...staticReducers,
...asyncReducers
});
}

最后，在我的代码中，每次我想向我的商店添加新的reducer时，我都会调用store.injectReducer:

store.injectReducer('reducerKey', theReducerSlice);

Answer 2

答案可以是存储增强器形式：

const injectReducerEnhancer: StoreEnhancer = (createStore) => (...args) => {
const store = createStore(...args);
store.asyncReducers = {};
store.injectReducer = (key, asyncReducer) => {
store.asyncReducers[key] = asyncReducer;
store.replaceReducer(createReducer(store.asyncReducers));
};
return store;
};
function createReducer(asyncReducers) {
return combineReducers({
...staticReducers,
...asyncReducers
});
};
configutreStore({
enhancers: [injectReducerEnhancer],
// ...
})