Redux with Typescript getting started documentation only exists with Redux-Toolkit

What docs page needs to be fixed?

https://redux.js.org/usage/usage-with-typescript

What is the problem?

The current state of the documentation as well as related tutorials, stackoverflows etc seem to leave a gap on how to create a redux store without the use of the strong opinions of Redux-Toolkit. This is made even harder by API references not including mention of Typescript types such as https://redux.js.org/api/createstore. Type definitions also don’t really share much in terms of the intent of the options of various functions / helper functions in terms of required use of generics.

What should be changed to fix the problem?

Provide a simple example or documentation alternative to https://redux.js.org/usage/usage-with-typescript which does not depend on Redux-Toolkit. For example, provide a typescript compatible version of the content of https://redux.js.org/usage/configuring-your-store – It’s taken me quite a long time to figure out the complex types being used for createStore to figure out how to adapt these examples to work successfully with typescript.

[markerikson]

Short version is, RTK is the right way to use Redux+TS together. There’s less actual code to write, and RTK is designed to infer as many TS types as possible. Frankly, having seen the before and after, I don’t know why anyone would want to write Redux code with vanilla Redux, much less vanilla Redux + JS.

Additionally, from our teaching / docs perspective, today RTK is “Redux”. If we could deprecate the underlying APIs entirely and just replace them with configureStore and createSlice we would, but we can’t due to the amount of existing code that’s out there.

We’ve been slowly revamping the docs over the last couple years to modernize things, and the content is certainly mixed at this point - there’s plenty of pages that still show legacy patterns, just because we haven’t gotten around to rewriting them.

I would certainly love to have better ways to integrate TS type definitions into the API docs in all our pages, per https://github.com/reduxjs/redux-toolkit/issues/1046 , but haven’t had any time to investigate ideas for this further.

I’ll also say that it’s really hard to figure out the right way to cover topics when some of your users use plain JS and some use TS. I’d like to have all snippets be toggleable between syntaxes, per https://github.com/reduxjs/redux-toolkit/issues/1203 . Unfortunately, that would take a ton of time and effort. This is an all-volunteer library maintainer team, there’s a ton of stuff to do, and we’ve only got so much time to work on things so we have to prioritize.

But, if you’re asking us to provide examples geared towards legacy patterns that we no longer want people using, that’s not something we plan to do.

[phryneas]

Adding to this:

TypeScript before Redux Toolkit was an afterthought. None of the Redux maintainers at the time (to my knowledge) actively used TS back then and the userbase did what you do in that situation: find a way to make it work. But vanilla Redux is made in a way that it cannot be made to work easily. It requires lots of ceremony, to create a half-hacky solution that masks some bugs because it makes assertions on types that are not true.
E.g. creating a union action type will be exhaustive, which will mask bugs like missing returns of completely unexpected action shapes from the type system. For more details see this article.

There are ways of writing TypeScript with Redux easily, but all of them require a third party library. https://github.com/piotrwitek/typesafe-actions (use isActionOf, not isOfType with this!) was very popular and I personally enjoyed using https://github.com/aikoven/typescript-fsa for a year or so.

So, the only sane documentation for vanilla Redux + TypeScript would be “use a helper library to make this work better”.

That said, there is a helper library. And that helper library is official. And that helper library is even the official recommendation for any Redux code written in the last two years. It it Redux Toolkit.

We really do not want you to write vanilla Redux (which already is a lot of frustrating boilerplate) and then slap double the code on top of this to follow patterns that were established to make something that “kinda does not really work” work. We want you to use Redux Toolkit, which is TypeScript first and removes all that type boilerplate completely.
And that’s why we do not have “Vanilla Redux with TypeScript” in the docs any more: doing so is just bad advice.

PS: using createStore with TypeScript should to my knowledge not need a single type definition at all. That’s one of the few things that always worked quite well. You can see that in this CodeSandbox