Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document Application Setup (React Native) #4296

Conversation

betomoedano
Copy link

@betomoedano betomoedano commented Feb 21, 2022

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
Copy link

codesandbox-ci bot commented Feb 21, 2022

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
Copy link

netlify bot commented Feb 21, 2022

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...

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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.

@betomoedano betomoedano changed the title Document Redux setup in React Native Document Application Setup (React Native) Feb 22, 2022
@betomoedano betomoedano marked this pull request as ready for review February 22, 2022 17:04
@markerikson
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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.

Copy link

@scottpolo scottpolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@markerikson
Copy link
Contributor

@scottpolo : please stop commenting on random PRs - that just adds to our notifications and doesn't help anything :(

@betomoedano
Copy link
Author

Hello! I think it is time to close this PR 😅

@betomoedano betomoedano deleted the document-redux-setup-react-native branch September 19, 2024 22:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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