Document Redux setup in additional environments like React Native and Next.js and link additional templates

[markerikson]

Our docs currently teach app setup based on a standard SPA-style approach, and specifically with use of Create-React-App. Related, our installation instructions currently point to the two RTK templates for CRA (JS and TS).

We should add additional installation and setup instructions for other major React environments, like React Native and Next which both differ significantly in how the app structure is defined and have different considerations (no ReactDOM.render() call in RN or Next, and Next users will likely want to integrate with Next's data fetching APIs).

We could possibly do this by updating/rewriting https://redux.js.org/usage/configuring-your-store to be more about "how do you set up a Redux store in various environments?" and covering RN/Next specifically as part of that, or we could keep the idea of "store configuration" and "app project setup" in separate pages.

Related to this, it would be nice if we could point to specific templates for those environments as well.

For RN, there's https://github.com/rahsheen/react-native-template-redux-typescript , which ports the RTK+TS example to the RN CLI.

For Next, there's https://github.com/vercel/next.js/tree/canary/examples/with-redux , which does something similar.

[rahsheen]

Just FYI, I should have a JS version of the RN template as well as TS and JS versions for Expo coming soon. Will look into adding these to the docs in a way that doesn't look ridiculous.

[crutchcorn]

I've worked a bit on the RN docs side of things. I think a PR is ready for that one. I wanted to wait until I added the NextJS section but had some questions on it first.

You mentioned that we probably want to document usage of NextJS's data fetching APIs, but the template linked doesn't seem to use getStaticProps or getServerSideProps. Is this still something we want to look into documenting?

AFAIK, even prior NextJS projects I've worked in before have tended not to utilize these methods in prod

[markerikson]

Yeah, that's something that had crossed my mind.

Part of me says that not everyone is going to need to do SSR-type behavior and need next-reducer-wrapper. I've actually got a Next app at work right now, and we're not using that at all.

But, it's also a common enough thing that I can see the point in having the official Redux+Next starter project have that built in to at least show how it should be set up.\

I know that the Next folks are happy to accept PRs to improve those projects, I just don't have time to even think about that work myself.

[crutchcorn]

You know, I honestly just didn't even know about next-reducer-wrapper until you pointed it out. After looking into it more, it definitely seems like the ecosystem's choice for doing the SSR-hydration with Redux

It even has a NextJS repo example: https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

If we're okay with using the next-reducer-wrapper as the jumping off point for NextJS I think I can draft different smaller sections ("this is how to do it without SSR, this is how to do it with, here's the difference") as part of the parent. I'll see what I can do this weekend

[markerikson]

Sounds good!

It may be worth at least mentioning that RTK 1.7 will have SSR support as well.

[markerikson]

I wrote a Reddit comment recently about how Next and Redux fit together:

https://www.reddit.com/r/javascript/comments/rpsyed/migrating_a_mean_angularjs_app_to_react_nextjs/hq6kk44/

Pasting here for ease of reading:

Depends on how you're trying to use Redux, in much the same way that it depends on how you're trying to use React.

If you're only using Next as a client-side tool (ie, like CRA but with multiple pages), then conceptually your Redux usage is similar. Create a store on the client side, dispatch some actions, fetch some data, etc. Where it gets trickier is that A) Next has multiple pages instead of one, and B) even in the CSR-only scenario Next will try to statically generate HTML for each page by default. That means you have to set up the Redux scaffolding so it creates a unique Redux store on demand per page, rather than just once from index.js like you would in a CRA app. I showed an example of the store creation setup code I cobbled together for this use case based on some Next examples.

Another question is whether you're going to have one store for the entire app regardless of what page you're on, or whether you're going to have different stores with different reducers for each page. I started out with separate stores per-page, and then later switched to one store for the entire app containing all reducers regardless of page.

The SSR question is separate. Redux has always been usable for SSR scenarios - even the original README says "works great in isomorphic apps because it doesn't use singletons and the data can be rehydrated". The basic pattern is:

• Create a Redux store on the server during the request. Fetch some data, do initial React rendering to HTML string.
• Get the Redux store state and include it in the generated HTML as a global JS variable
• On the client side, create the store and pass in that serialized state to act as the initial state

The same pattern applies here to Next usage, except that it is again more complicated due to the multi-page setup scenario and Next's different options for fetching data on the server.

That's why there's a fairly complex library called https://github.com/kirill-konshin/next-redux-wrapper , which tries to abstract the process of grabbing data from the server-side APIs and rehydrating that data into the Redux store on the client side.

We actually just added SSR/rehydration support to RTK Query in the recent RTK 1.7 release, and we specifically have instructions and an example of using RTKQ in combination with next-redux-wrapper:

• https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering

[markerikson]

I just wrote up a fairly similar comment and am pasting here for posterity and later documenting:

With CRA, creating the store and adding the <Provider> is easy. There's already an easily visible root.render(<App />) in src/index.js, and you just import the store and wrap that in <Provider store={store}>.

With Next, there is no one single render() call, because A) Next does that internally, and B) there are many pages.

So what you typically have to do is add a pages/_app.js file and wrap that content in <Provider>.

It gets more complicated when you start considering the server-vs-client rendering behavior. Next automatically tries to pre-build pages on the server by default, along with rendering them on the client. That means your code has to handle running on the server, and that includes creating a Redux store for each page.

So, you end up having to write some extra code to manage creating an instance of the store on demand, and having that get used once on the server and again on the client.

THEN, what if you want to use something like getServerSideProps to do some data fetching and feed that into the Redux store on the server for the initial render? You would then want to pass that into the Redux store on the client side to initialize it with the same values used in the server render, but that takes extra work. The standard tool for helping with that is https://github.com/kirill-konshin/next-redux-wrapper , which abstracts the server data lifecycles, helping init the Redux store, and passing along the data from server to client.

[fregayeg]

Hiya! I can take care to add a good RN example but with Expo.

Expo is recommended for beginners/mid-levels based on RN docs and it has a lot of advantages.

👉 This could be motivating to new redux learners + existing developers (like me 😃) .

Also, I know experts in the React Native community who hadn't used Expo before, but today they changed their minds after hearing about Expo team's updates over the past 2 years, especially since the appearance of EAS services

Note: for more information about new Expo's features in recent years visit this link.

👉 I don't know about Next.js and will not be able to do anything on it.

Would you agree with me on working only on adding RN (example + docs) to redux website? 🙏

Just give me the go 💚

thanks