Describe inferring RootState type from store.getState

[markerikson]

The docs show inferring type RootState = ReturnType<typeof rootReducer>. But, if you pass the slice reducers directly to configureStore(), you never created the root reducer yourself, so you need to infer it as type RootState = ReturnType<typeof store.getState> instead.

We should update the Advanced Tutorial and Usage with TypeScript pages to mention that.

See https://stackoverflow.com/a/59827580/62937 for an example of this

[firstred]

That works indeed! I just arrived at that section of the documentation this morning. Here are my results with TypeScript 3.7.5:

It fails with combineReducers() or passing them directly to configureStore(). The type of RootState would always be unknown.
The only thing that works is, indeed, using type RootState = ReturnType<typeof store.getState> and passing the reducers directly to configureStore(). combineReducers() would still turn the type into unknown.

Based on my experience, I would recommend to leave out combineReducers() in the TypeScript documentation until a solution for combineReducers() has been found. Until then passing the reducers directly to configureStore() and using ReturnType<typeof store.getState> would be a nice alternative.

BTW: Redux Toolkit has been really helpful so far. Thanks a lot for another massive time-saver!

[markerikson]

@firstred : ah.... I'm very confused. Inferring the return type of combineReducers does work, as I showed in the Advanced Tutorial. See this sandbox:

https://codesandbox.io/s/rtk-github-issues-example-03-final-ihttc?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2FrootReducer.ts&theme=dark

If I hover over export type RootState = ReturnType<typeof rootReducer>, I see:

const rootReducer: Reducer<CombinedState<{
    issuesDisplay: CurrentDisplayState;
    repoDetails: RepoDetailsState;
    issues: IssuesState;
    comments: CommentsState;
}>, AnyAction>

Where and how are you seeing problems with this?

[firstred]

PhpStorm 2019.3.1 + TypeScript 3.7.5. This is what I am seeing:

typeof rootReducer + combineReducers():

typeof store.getState + combineReducers():

typeof rootReducer:

typeof store.getState:

Somehow combineReducers() has a return type of Reducer<unknown>.

I did use createAction() to create the actions. Maybe that could be the issue.

[markerikson]

Can you put together a project that reproduces this, either as a CodeSandbox or a separate repo?

[firstred]

Found the issue!

I hadn't understood from the documentation that I was supposed to import combineReducers() from @reduxjs/toolkit and not from redux. PhpStorm somehow only suggests the one from redux.

Back the issues described in the OP: that works for me now. How about improving these particular examples some more by showing that you have to import from @reduxjs/toolkit instead of redux? I'll try to make a PR :)

[markerikson]

Hmm. It's the exact same function - RTK just does export {combineReducers} from "redux".

There shouldn't be any actual difference in behavior or types at all.

[firstred]

Mind = blown haha!

[firstred]

Indeed, it still works: https://codesandbox.io/s/rtk-github-issues-example-03-final-co03n

I am unable to import the specific commit into CodeSandbox, but here's a link to it: https://github.com/firstred/bunqDesktop/blob/f514eb8f60e1f26cc997f4befaa9c51a4f65e422/src/store/index.ts
It is part of a pull request trying to migrate to Redux Toolkit. Both VS Code and PhpStorm are having problems with these specific changes and only when you import combineReducers() from redux. Just wrap the reducer at line 79 with combineReducers and see how @reduxjs/toolkit and redux show different behavior. Strange...
I'll try to reproduce this on another system. Maybe it's just this particular laptop.

[phryneas]

Maybe you have an older version of redux installed than the one re-exported from RTK?

[markerikson]

Yep, I bet that's it.

Looking at package.json from that repo, I see "@reduxjs/toolkit": "^1.2.3", under dependencies, and also "redux": "^3.7.2", under devDependencies.

That would likely end up with both redux@4 and redux@3 installed somehow.

[firstred]

Ahh, good catch! That was the issue. Didn't realize RTK needed 4.0.0 or higher.

Thanks everyone!

[markerikson]

All that said, I'd still like to have the original described RootState bit added to the docs :)

[firstred]

Yes, back to the original issue. I now finally have the right tools installed to confirm that it is indeed better if you prefer use configureStore() directly :)

I'll create a PR!