feat: add exemple with redux toolkit in typescript

[JulienKode]

This pull request add typescript to the current redux-toolkit example on next.js. @markerikson suggested this nice idea to add a ts example: https://twitter.com/acemarke/status/1370877104527712259?s=20

This example is with the previous redux-toolkit example which was more complex. An example with the current example is available here: #23249

Bug

• Related issues linked using fixes #number
• Integration tests added

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.

Documentation / Examples

• Make sure the linting passes

[leerob]

My opinion: I much prefer the simplified RTK example. Is it common folks will be using thunk anyway? Wouldn't they likely use RTK query or SWR/react-query instead? I fear this will set folks off on the wrong foot by being too complicated.

If we really want TS, maybe we re-open this one? #23052

Where I struggle is that it's not much different from JS to TS.

[markerikson]

A couple thoughts:

• There's value in having a small thunk usage in the example. We do that in the RTK CRA templates, just to show the syntax and that it can be used:

https://github.com/reduxjs/cra-template-redux/blob/a40250d2b9cff955fe51b96d7f7d0cf47f616016/template/src/features/counter/counterSlice.js#L27-L35

• We do definitely want people to start adapting RTK Query, but it's not even finalized yet (we're hoping to wrap up the alpha and merge it into RTK proper very soon). Even once that's ready, that would require modifying this example to have a bunch of data fetching in it, which is a rather different thing.
• Agreed that there's not a lot of difference between a JS and TS example at this point, but there are nuances in terms of how to set things up (especially with exporting types based on the store). You can see the differences between https://github.com/reduxjs/cra-template-redux and https://github.com/reduxjs/cra-template-redux-typescript.

I don't know what particular policies you have here with examples in the Next repo, so I can certainly understand if you'd prefer to only have one of these here. Problem is, at that point should it be the JS one or the TS one? If anything I'd almost say prefer having a TS example, but either way it's gonna exclude some useful info.

[leerob]

There's value in having a small thunk usage in the example. We do that in the RTK CRA templates, just to show the syntax and that it can be used:

Sounds good to me, just wanted to confirm 👍

We do definitely want people to start adapting RTK Query, but it's not even finalized yet (we're hoping to wrap up the alpha and merge it into RTK proper very soon). Even once that's ready, that would require modifying this example to have a bunch of data fetching in it, which is a rather different thing.

+1

I don't know what particular policies you have here with examples in the Next repo, so I can certainly understand if you'd prefer to only have one of these here. Problem is, at that point should it be the JS one or the TS one? If anything I'd almost say prefer having a TS example, but either way it's gonna exclude some useful info.

No particular policy - just try to prevent one example from being up-to-date and the other which is the 95% the same not getting updated too. I try my best to catch them on code reviews but sometimes it slips. The real solution here is a way to more easily switch between JS/TS in examples and maybe keep the same core codebase? 😄

tl;dr we can move ahead with this 👍

[markerikson]

Nice. Yeah, I've got a Redux docs issue to update our "Installation" page to start pointing to more of these examples for Next and RN:

reduxjs/redux#4035

[Mokshit06]

Hey, just a question. Shouldn't a starter template just have the setup of the store and a simple "slice" example like https://github.com/reduxjs/cra-template-redux-typescript? This looks more like a complete app and too complex for a starter template. So if the user starts with this template, it would take them more time to remove unnecessary code which they might not need (like API routes and notes slice) than it would take to do the setup itself.

[JulienKode]

Thanks for the review @leerob @markerikson

[markerikson]

Hmm. Yeah, our CRA templates are just a single counterSlice file and <Counter> component to illustrate the basic mechanics. If we do want this to be usable as a "template" vs a larger example, it might be worth paring these down to just the basics to better serve as a starting point.

[Mokshit06]

Something like #23052? It is almost identical to https://github.com/reduxjs/cra-template-redux-typescript

[cbdeveloper]

Is this the current example? https://github.com/vercel/next.js/blob/canary/examples/with-redux-toolkit

Will the example show the client App's (and Redux state) hydration with server data?

I'm still pretty lost on how to keep my client store in sync with what is coming from the server.