From 2da551d7ef9732fe50d5d37e1ac15ed567ef41b1 Mon Sep 17 00:00:00 2001 From: betomoedano Date: Sun, 20 Feb 2022 22:14:50 -0500 Subject: [PATCH 1/6] create RN markdown file --- website/sidebars.js | 1 + 1 file changed, 1 insertion(+) diff --git a/website/sidebars.js b/website/sidebars.js index 245d0c0c8c..dcacae6943 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -12,6 +12,7 @@ module.exports = { 'tutorials/tutorials-index', 'tutorials/quick-start', 'tutorials/typescript-quick-start', + 'tutorials/react-native-quick-start', { type: 'category', label: 'Redux Essentials', From 5c3cdf2d0bdd7b7a4dbe6c3f3b516d91548cff68 Mon Sep 17 00:00:00 2001 From: betomoedano Date: Mon, 21 Feb 2022 02:03:50 -0500 Subject: [PATCH 2/6] create slice example --- docs/tutorials/react-native.md | 94 ++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 docs/tutorials/react-native.md diff --git a/docs/tutorials/react-native.md b/docs/tutorials/react-native.md new file mode 100644 index 0000000000..e506fde605 --- /dev/null +++ b/docs/tutorials/react-native.md @@ -0,0 +1,94 @@ +--- +id: react-native-quick-start +title: React Native Quick Start +sidebar_label: React Native Quick Start +--- + +# Redux Toolkit React Native Quick Start + +:::tip What You'll Learn + +- How to manage state in React Native using Redux Toolkit and React Redux + +::: + +:::info Prerequisites + +- Some experience using [React Native](https://reactnative.dev/docs/getting-started) as well as [Hooks](https://reactjs.org/docs/hooks-intro.html), [Navigation](https://reactnavigation.org/), [Core Components, and APIs](https://reactnative.dev/docs/components-and-apis). +- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/) +- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow) + +::: + +## Introduction + +Welcome to the Redux Toolkit React Native Quick Start tutorial! **This tutorial will briefly show how to use Redux Toolkit and React Redux to manage state in React Native**. + +### How to Read This Tutorial + +Here is an already set up [React Native Template Redux TypeScript](https://github.com/rahsheen/react-native-template-redux-typescript). + +## Installation + +Add the Redux Toolkit and React-Redux packages to your project: + +If you are using npm +```sh +npm install @reduxjs/toolkit react-redux +``` +If you are using yarn +```sh +yarn add @reduxjs/toolkit react-redux +``` + +## Create Slice + +Let's imagine that we are building a Reminders app and we want to make the reminders available to the `AddReminderScreen.js` and the `HomeScreen.js`. + +We need to use createSlice to define our Reminders logic. Inside of your `/src` folder create another folder called `features`, inside features create another folder called `reminders` and finally create a `remindersSlice.js` file. + +We recommend putting as much as the logic for a given feature as possible into a single file, we typically refer to this as a "Slice File" because it represents the logic in the data for one Slice of your redux state. + +:::tip File Structure + +Redux does not care about your file structure however we recommend separate folders per feature. See [Redux FAQ: Code Structure](https://redux.js.org/faq/code-structure) for extended details on file structure. + +::: + +```js title="src/features/reminders/remindersSlice.js" +import { createSlice } from "@reduxjs/toolkit"; + +//initial state for this slice +const initialState = { + reminders: [], +}; + +//here we define the slice that contains the reducer logic +export const remindersSlice = createSlice({ + name: "reminders", + initialState, + reducers: { + setReminders: (state, action) => { + state.reminders = action.payload; + }, + addReminder: (state, action) => { + state.reminders.push(action.payload); + }, + deleteReminder: (state, action) => { + state.reminders = state.reminders.filter( + (reminder) => reminder.id !== action.payload + ); + }, + }, +}); + +export const { setReminders, addReminder, deleteReminder } = remindersSlice.actions; +export default remindersSlice.reducer; + +``` + +## Create a Redux Store + +## What's Next? + +See [the "Usage with TypeScript" page](../usage/UsageWithTypescript.md) for extended details on how to use Redux Toolkit's APIs with TypeScript. From 56cd3c0ccc09959352127b42616782212e00e685 Mon Sep 17 00:00:00 2001 From: betomoedano Date: Mon, 21 Feb 2022 16:33:19 -0500 Subject: [PATCH 3/6] delete react-native page and create application-setup page --- website/sidebars.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/sidebars.js b/website/sidebars.js index dcacae6943..d042cdb767 100755 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -12,7 +12,6 @@ module.exports = { 'tutorials/tutorials-index', 'tutorials/quick-start', 'tutorials/typescript-quick-start', - 'tutorials/react-native-quick-start', { type: 'category', label: 'Redux Essentials', @@ -52,7 +51,8 @@ module.exports = { 'usage/configuring-your-store', 'usage/code-splitting', 'usage/server-rendering', - 'usage/isolating-redux-sub-apps' + 'usage/isolating-redux-sub-apps', + 'usage/application-setup' ] }, { From 44d332dbf9df47a9afd905e671057b5480d3a37d Mon Sep 17 00:00:00 2001 From: betomoedano Date: Tue, 22 Feb 2022 03:18:56 -0500 Subject: [PATCH 4/6] Add React Native setup --- docs/usage/ApplicationSetup.md | 81 ++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 docs/usage/ApplicationSetup.md diff --git a/docs/usage/ApplicationSetup.md b/docs/usage/ApplicationSetup.md new file mode 100644 index 0000000000..5c28baac66 --- /dev/null +++ b/docs/usage/ApplicationSetup.md @@ -0,0 +1,81 @@ +--- +id: application-setup +title: Application Setup +sidebar_label: Application Setup +--- + +# Application Setup + +## Introduction + +Welcome to the Application Setup section! **This page focus on showing how to set up Redux in different environments like Create React App/Vite, React Native, and Next.** + +## React Native +This section will teach you how to setup a React Native project with Redux Toolkit. If you want to start a React Native project with the Redux Toolkit already setup in your terminal, run the following command: +```sh + expo init my-app --template react-native-redux-template +``` +You can also follow this link to view the template on [**GitHub**](https://github.com/betomoedano/react-native-template-redux-toolkit). If you want to use Typescript checkout this [**Template**](https://github.com/rahsheen/react-native-template-redux-typescript). +### File Structure +Typically in React Native projects, we have an `src` folder that contains the code for our application such as components, screens, etc. and at the root of the project, we have the `App.js` that usually is the initial file to the app. + +#### Where do I put the slices? +Although Redux doesn't care about your file structure we recommend putting all your slices under a folder called `features` the idea is that you pick the concept or multiple concepts of your app and create separate folders per feature. +For example, if we have a counter slice our file structure would look like this: `src/features/counter/counterSlice.js` + +#### Where do I put the store? +We recommend keeping the `store.js` file inside a folder named `app` under `src`. If you are using Typescript and have a predefined version of the [Redux hooks](https://react-redux.js.org/api/hooks) we recommend putting those hooks inside the `app` folder as well. + +:::tip +See [Redux FAQ: Code Structure](https://redux.js.org/faq/code-structure) for extended details on file structure. +::: + +### Adding the React Redux Provider +The [``](https://react-redux.js.org/api/provider) component makes the Redux `store` available to any nested components that need to access the Redux store. + +In the example below, we added the `` to the `` since it is at the very top of our component hierarchy. + +```js title="App.js" +import Home from "./src/screens/Home"; +import { Provider } from "react-redux"; +import { store } from "./src/app/store"; + +export default function App() { + return ( + + + + ); +} +``` + +### Additional considerations when initializing the app +In some cases, you could need access to the Redux store in the `` component but since we are adding the Provider inside the `` we can not access the store within the ``. +In the example below we show how to solve this by creating an `` which contains the `` and the `` + +```js title="App.js" +import { View, Text } from "react-native"; +import { Provider } from "react-redux"; +import { store } from "./src/app/store"; +import { useSelector } from "@reduxjs/toolkit"; + +export default function AppWrapper() { + + + +} + +function App() { + const count = useSelector((state) => state.counter.count); + return ( + + Counter value: {count} + + ); +} +``` + +## Further Resources + +- See [the Redux Toolkit TypeScript Next.js Example](https://github.com/vercel/next.js/tree/canary/examples/with-redux) for how to integrate Next.js with Redux Toolkit. +- See [the Create React App/Vite Example](https://github.com/learnwithjason/lets-learn-redux-toolkit) for how to integrate React/Vite with Redux Toolkit. \ No newline at end of file From 4021cae571edde4a32250766b461e32b876420c1 Mon Sep 17 00:00:00 2001 From: betomoedano Date: Tue, 22 Feb 2022 11:56:38 -0500 Subject: [PATCH 5/6] small fixes --- docs/usage/ApplicationSetup.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/usage/ApplicationSetup.md b/docs/usage/ApplicationSetup.md index 5c28baac66..34a0cfe01b 100644 --- a/docs/usage/ApplicationSetup.md +++ b/docs/usage/ApplicationSetup.md @@ -8,7 +8,7 @@ sidebar_label: Application Setup ## Introduction -Welcome to the Application Setup section! **This page focus on showing how to set up Redux in different environments like Create React App/Vite, React Native, and Next.** +Welcome to the Application Setup section! **This page will focus on showing you how to set up Redux in different environments like Create React App/Vite, React Native, and Next.** ## React Native This section will teach you how to setup a React Native project with Redux Toolkit. If you want to start a React Native project with the Redux Toolkit already setup in your terminal, run the following command: @@ -17,14 +17,14 @@ This section will teach you how to setup a React Native project with Redux Toolk ``` You can also follow this link to view the template on [**GitHub**](https://github.com/betomoedano/react-native-template-redux-toolkit). If you want to use Typescript checkout this [**Template**](https://github.com/rahsheen/react-native-template-redux-typescript). ### File Structure -Typically in React Native projects, we have an `src` folder that contains the code for our application such as components, screens, etc. and at the root of the project, we have the `App.js` that usually is the initial file to the app. +Typically in React Native projects, we have an `src` folder that contains the code for our application such as components, screens, etc. And at the root of the project, we have the `App.js` that usually is the initial file to the app. #### Where do I put the slices? Although Redux doesn't care about your file structure we recommend putting all your slices under a folder called `features` the idea is that you pick the concept or multiple concepts of your app and create separate folders per feature. For example, if we have a counter slice our file structure would look like this: `src/features/counter/counterSlice.js` #### Where do I put the store? -We recommend keeping the `store.js` file inside a folder named `app` under `src`. If you are using Typescript and have a predefined version of the [Redux hooks](https://react-redux.js.org/api/hooks) we recommend putting those hooks inside the `app` folder as well. +We recommend keeping the `store.js` file inside a folder named `app` under `src`. If you are using Typescript and have a predefined version of the [Redux hooks](https://react-redux.js.org/api/hooks) we recommend putting these hooks inside the `app` folder as well. :::tip See [Redux FAQ: Code Structure](https://redux.js.org/faq/code-structure) for extended details on file structure. @@ -51,7 +51,7 @@ export default function App() { ### Additional considerations when initializing the app In some cases, you could need access to the Redux store in the `` component but since we are adding the Provider inside the `` we can not access the store within the ``. -In the example below we show how to solve this by creating an `` which contains the `` and the `` +In the example below we show how to solve this by creating an `` which contains the `` and the ``. ```js title="App.js" import { View, Text } from "react-native"; From dec36a0e9694a6cc122e602604d732256a0a100a Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Thu, 12 May 2022 13:01:54 -0400 Subject: [PATCH 6/6] Delete react-native.md --- docs/tutorials/react-native.md | 94 ---------------------------------- 1 file changed, 94 deletions(-) delete mode 100644 docs/tutorials/react-native.md diff --git a/docs/tutorials/react-native.md b/docs/tutorials/react-native.md deleted file mode 100644 index e506fde605..0000000000 --- a/docs/tutorials/react-native.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: react-native-quick-start -title: React Native Quick Start -sidebar_label: React Native Quick Start ---- - -# Redux Toolkit React Native Quick Start - -:::tip What You'll Learn - -- How to manage state in React Native using Redux Toolkit and React Redux - -::: - -:::info Prerequisites - -- Some experience using [React Native](https://reactnative.dev/docs/getting-started) as well as [Hooks](https://reactjs.org/docs/hooks-intro.html), [Navigation](https://reactnavigation.org/), [Core Components, and APIs](https://reactnative.dev/docs/components-and-apis). -- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/) -- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow) - -::: - -## Introduction - -Welcome to the Redux Toolkit React Native Quick Start tutorial! **This tutorial will briefly show how to use Redux Toolkit and React Redux to manage state in React Native**. - -### How to Read This Tutorial - -Here is an already set up [React Native Template Redux TypeScript](https://github.com/rahsheen/react-native-template-redux-typescript). - -## Installation - -Add the Redux Toolkit and React-Redux packages to your project: - -If you are using npm -```sh -npm install @reduxjs/toolkit react-redux -``` -If you are using yarn -```sh -yarn add @reduxjs/toolkit react-redux -``` - -## Create Slice - -Let's imagine that we are building a Reminders app and we want to make the reminders available to the `AddReminderScreen.js` and the `HomeScreen.js`. - -We need to use createSlice to define our Reminders logic. Inside of your `/src` folder create another folder called `features`, inside features create another folder called `reminders` and finally create a `remindersSlice.js` file. - -We recommend putting as much as the logic for a given feature as possible into a single file, we typically refer to this as a "Slice File" because it represents the logic in the data for one Slice of your redux state. - -:::tip File Structure - -Redux does not care about your file structure however we recommend separate folders per feature. See [Redux FAQ: Code Structure](https://redux.js.org/faq/code-structure) for extended details on file structure. - -::: - -```js title="src/features/reminders/remindersSlice.js" -import { createSlice } from "@reduxjs/toolkit"; - -//initial state for this slice -const initialState = { - reminders: [], -}; - -//here we define the slice that contains the reducer logic -export const remindersSlice = createSlice({ - name: "reminders", - initialState, - reducers: { - setReminders: (state, action) => { - state.reminders = action.payload; - }, - addReminder: (state, action) => { - state.reminders.push(action.payload); - }, - deleteReminder: (state, action) => { - state.reminders = state.reminders.filter( - (reminder) => reminder.id !== action.payload - ); - }, - }, -}); - -export const { setReminders, addReminder, deleteReminder } = remindersSlice.actions; -export default remindersSlice.reducer; - -``` - -## Create a Redux Store - -## What's Next? - -See [the "Usage with TypeScript" page](../usage/UsageWithTypescript.md) for extended details on how to use Redux Toolkit's APIs with TypeScript.