英文:
How typing rtk reducer in root module?
问题
I understand that you want a translation of the code and relevant information without additional responses. Here's the translation:
我正在编写一个使用模块化架构的React应用程序。每个模块都在单个接口之外导入。
const authModule: IModule = {
routes,
reducers: {},
};
export type IModule = {
routes?: IRoute[];
reducers: IReducers;
};
然后，所有模块都在根模块中收集：
const modules: IModule[] = [
authModule,
userModule,
weatherForecastModule,
commonModule,
];
const routes = modules.reduce(
(acc: IRoute[], module) => (!module.routes ? acc : [...acc, ...module.routes]),
[],
);
const reducers = modules.reduce(
(acc: IReducers, module) => ({ ...acc, ...module.reducers }),
{},
);
const rootModule: IModule = {
routes: routes,
reducers: reducers,
};
export default rootModule;
然后，我将所有的reducer添加到store中：
const store = configureStore({
reducer: {
[baseApi.reducerPath]: baseApi.reducer,
...rootModule.reducers,
userReducer,
screenReducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(baseApi.middleware),
devTools: true,
});
setupListeners(store.dispatch);
export default store;
在将reducers组装成一个模块的过程中，它们的类型信息丢失了，这就是为什么useAppSelector无法显示可能的reducers。
const user = useAppSelector((state) => state.???);
附加信息：
export type RootState = ReturnType<typeof store.getState>;
export type AppStore = typeof store;
export type AppDispatch = AppStore['dispatch'];
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
Please let me know if you need any further assistance.
英文:
I am writing a react application using a modular architecture. Each module is imported outside a single interface.
const authModule: IModule = {
routes,
reducers: {},
};
export type IModule = {
routes?: IRoute[]
reducers:IReducers
};
Then all modules are collected into one in the root module:
const modules:IModule[] = [
authModule,
userModule,
weatherForecastModule,
commonModule,
];
const routs = modules.reduce(
(acc: IRoute[], module) => (!module.routes ? acc : [...acc, ...module.routes]),
[],
);
const reducers = modules.reduce(
(acc: IReducers, module) => ({ ...acc, ...module.reducers }),
{},
);
const rootModule: IModule = {
routes: routs,
reducers,
};
export default rootModule;
From which I add all reducers to the store:
const store = configureStore({
reducer: {
[baseApi.reducerPath]: baseApi.reducer,
...rootModule.reducers,
userReducer,
screenReducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware()
.concat(baseApi.middleware),
devTools: true,
});
setupListeners(store.dispatch);
export default store;
In the process of assembling reducers into one module, their typing is lost, which is why useAppSelector does not show possible reducers
const user = useAppSelector((state) => state.???);
Additional info:
export type RootState = ReturnType<typeof store.getState>;
export type AppStore = typeof store;
export type AppDispatch = AppStore['dispatch'];
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
How fix it?
Simple example:
https://codesandbox.io/s/sleepy-wilbur-qj27hs?file=/src/modules/user/index.ts
答案1
得分: 1
无法绕过手动组装结果对象的类型。由于您将其转换为 IModule，TypeScript 无法以任何方式推断出这一点，因为它已经从中删除了所有“有趣”的类型信息。
英文:
You will not get around manually assembling the type for the resulting object.
There is no way for TypeScript to infer this in any way, considering that your cast to IModule already removes all "interesting" type information from them.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论