Why is Store.getState() returning 'any' type after using rootReducer with combinedReducers?

Question

I am trying to use a root reducer to wrap my combined reducers in order to reset them on reset store action.
However, after using root reducer I am unable to directly access reducers by Store.getState().recuder1
Typescript does not give me any errors because Store.getState() is returning any type. How can I get the type of combinedReducers in Store.getState() after using rootReducer?

Any guidance would be appreciated

const combinedReducers = combineReducers({
    reducer1,
    reducer2,
    reducer3
});

const rootReducer = (state, action) : ReturnType<typeof reducer> => {
    if (action.type === RESET_STORE) {
        return combinedReducers(undefined, action)
    }
    return combinedReducers(state, action);
}

export default rootReducer;

This is how store is being created

declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)));

export default store;

Before using the root reducer I only passed combinedReducers to the store and I could get all reducers from Store.getState().reducer1/reducer2 etc. It helps me in development process because I could access the reducers and their respective properties directly.

Answer 1

My primary advice would be to switch from the old legacy createStore method to Redux Toolkit's configureStore. Not only does configureStore automatically set up the Redux DevTools extension for you, it has significantly better type inference than createStore does:

• https://redux.js.org/introduction/why-rtk-is-redux-today
• https://redux.js.org/usage/migrating-to-modern-redux