Document Application Setup (React Native)

[betomoedano]

Hey,

I've created a "Application Setup" under Setup and Organization to provide instruction on how to setup Redux for React Native. I've covered the file structure, adding the React Redux provider, and some additional considerations. Let me know your thoughts and any edits/updates. Thanks.

fixes #4035

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit dec36a0:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration

[netlify]

✅ Deploy Preview for redux-docs ready!

Name	Link
🔨 Latest commit	dec36a0
🔍 Latest deploy log	https://app.netlify.com/sites/redux-docs/deploys/627d3f78094e47007b6a67a8
😎 Deploy Preview	https://deploy-preview-4296--redux-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[markerikson]

I think I'd like to see this material as part of the "Configuring Your Store" page under the "Using Redux" section, and then we can add some info on Next.js setup as well. Alternately, maybe we should add a new page under that "Setup" subcategory.

The idea of creating slices and such is the same either way - what differs is folder structure, where you create the store, where you use the Provider, etc.

[betomoedano]

Ok just to clarify.

If I'm understanding you correctly we would like to add an example like the one in the image inside the "Configuring Your Store" page. I'm thinking maybe after the section "creating the store" add a section named "React Native Store Setup." In this section, I will talk a little about folder structure and where to use the provider.

Another option as you said could be to create a page called "React Native Setup" under the "Setup" subcategory. On that page, I will show some examples of how would look the app like with the provider and store I will also talk about folder structure and where to use the provider, and finally maybe we could add some examples using "useSelector" and "useDispatch" hooks.

What option do you like better?

[markerikson]

Hmm. Tell you what - this isn't exactly "configuring the store". It's really about "setting up the app".

How about we add a new page called "Application Setup" under the "Setup and Organization" category, and we can have separate sections for "Create React App / Vite", "React Native", and "Next"? (you can just do the "RN" section for now).

Let's assume you've got some slices already, and focus on answering:

• What does the general file structure look like? Where do I keep the store.js file?
• We need to add a <Provider>. What file does that happen in?
• Are there any other considerations for how we initialize the app?
  • In the case of RN, we may need to have a tiny <AppRoot> or something component that does <Provider><App /></Provider> and "register" that, I think?

[betomoedano]

Good idea! I think having a separate page would be easy to read and understand I will start creating the "Application Setup" page and start working on the RN section.

[markerikson]

Hi, afraid I forgot this PR was here :)

Tell you what. Let's skip the "tutorial" page for now, but I like the "Application Setup" content - let's go ahead and get that in, because it's a good starting point.

[markerikson]

Grr. The PR is a bit stale now due to other Docusaurus updates.

I'll rebase it tonight, fix the formatting issues, and merge this.

[EskiMojo14]

Out of curiosity, what about this setup is unique to React Native? generally this guide looks very similar to a SPA setup.

it's also worth noting that we now link to the React Native template in the installation page, and NextJS now has its own page under the usage guide.

[markerikson]

The biggest thing that I've seen is that you can't do ReactDOM.render(<Provider><App /></Provider>), because you don't call an equivalent render() function directly. Instead, you have to register a root component with RN. So, in order to use a <Provider>, you have to create a top-top-level wrapper component that does return <Provider><App /></Provider>.

This isn't unique to React-Redux, but it's worth calling out.

Also not sure if there's any other nuances around the cross-platform code vs platform-specific setup.