'React Redux and dynamically imported reducers with typescript
I'm trying to create redux store with dynamically imported reducers, these reducers are imported at a runtime.
store.ts:
const store = configureStore({
reducer: getReducers(),
})
export type AppDispatch = typeof store.dispatch
export type RootState = ReturnType<typeof store.getState>
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, AnyAction>
getReducers():
const getReducers = () => ({
rest: restReducer,
config: configReducer,
websocket: websocketReducer,
modules: (combineReducers({ ...getModulesReducers() })),
})
getModulesReducers():
export const getModulesReducers = () => {
const reducers = {}
//this is just an example
const reducersPaths = {
counter: '@/modules/dummy/store/reducers/counterReducer',
config: '@/modules/dummy/store/dummy/configReducer'}
Object.keys(reducersPaths).forEach(name => {
reducers[name] = require(reducersPaths[name]).default
})
return reducers
Everything works fine, my only problem is that store.getState() don't have propper typings, keys rest, config, websocket are ok but key modules is of type any.
Is there any way to add proper typings to redux state with dynamically imported reducers?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
