search

reduxjs / redux

A JS library for predictable global state management
https://redux.js.org
MIT License
60.54k stars 15.28k forks source link

Document Application Setup (React Native) #4296

Open betomoedano opened 2 years ago

betomoedano commented 2 years ago

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[bot] commented 2 years ago

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 dec36a0e9694a6cc122e602604d732256a0a100a:

Sandbox Source
Vanilla Configuration
Vanilla Typescript Configuration
netlify[bot] commented 2 years ago

Deploy Preview for redux-docs ready!

Name Link
Latest commit dec36a0e9694a6cc122e602604d732256a0a100a
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...

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 commented 2 years ago

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 commented 2 years ago

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.

image

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 commented 2 years ago

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:

betomoedano commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 3 months ago

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 commented 3 months ago

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.