Skip to content

Commit 1a92641

Browse files
committed
chore: intial setup for Website
1 parent 7980bb9 commit 1a92641

32 files changed

+16108
-5313
lines changed

docs/introduction/getting-started.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
id: getting-started
3+
title: Getting Started with Angular Redux
4+
hide_title: true
5+
sidebar_label: Getting Started
6+
description: 'Introduction > Getting Started: First steps with Angular Redux'
7+
---
8+
9+
 
10+
11+
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
12+
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
13+
14+
# Getting Started with React Redux
15+
16+
[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://react.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
17+
18+
## Installation
19+
20+
React Redux 8.x requires **React 16.8.3 or later** / **React Native 0.59 or later**, in order to make use of React Hooks.
21+
22+
### Create a React Redux App
23+
24+
The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
25+
26+
Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
27+
28+
```bash
29+
# Vite with our Redux+TS template
30+
# (using the `degit` tool to clone and extract the template)
31+
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
32+
33+
# Next.js using the `with-redux` template
34+
npx create-next-app --example with-redux my-app
35+
```
36+
37+
We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
38+
39+
- https://github.com/rahsheen/react-native-template-redux-typescript
40+
- https://github.com/rahsheen/expo-template-redux-typescript
41+
42+
### An Existing React App
43+
44+
To use React Redux with your React app, install it as a dependency:
45+
46+
```bash
47+
# If you use npm:
48+
npm install react-redux
49+
50+
# Or if you use Yarn:
51+
yarn add react-redux
52+
```
53+
54+
You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
55+
56+
React-Redux v8 is written in TypeScript, so all types are automatically included.
57+
58+
## API Overview
59+
60+
### `Provider`
61+
62+
React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
63+
64+
```jsx
65+
import React from 'react'
66+
import ReactDOM from 'react-dom/client'
67+
68+
import { Provider } from 'react-redux'
69+
import store from './store'
70+
71+
import App from './App'
72+
73+
// As of React 18
74+
const root = ReactDOM.createRoot(document.getElementById('root'))
75+
root.render(
76+
<Provider store={store}>
77+
<App />
78+
</Provider>,
79+
)
80+
```
81+
82+
### Hooks
83+
84+
React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
85+
86+
`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
87+
88+
```jsx
89+
import React from 'react'
90+
import { useSelector, useDispatch } from 'react-redux'
91+
import {
92+
decrement,
93+
increment,
94+
incrementByAmount,
95+
incrementAsync,
96+
selectCount,
97+
} from './counterSlice'
98+
import styles from './Counter.module.css'
99+
100+
export function Counter() {
101+
const count = useSelector(selectCount)
102+
const dispatch = useDispatch()
103+
104+
return (
105+
<div>
106+
<div className={styles.row}>
107+
<button
108+
className={styles.button}
109+
aria-label="Increment value"
110+
onClick={() => dispatch(increment())}
111+
>
112+
+
113+
</button>
114+
<span className={styles.value}>{count}</span>
115+
<button
116+
className={styles.button}
117+
aria-label="Decrement value"
118+
onClick={() => dispatch(decrement())}
119+
>
120+
-
121+
</button>
122+
</div>
123+
{/* omit additional rendering output here */}
124+
</div>
125+
)
126+
}
127+
```
128+
129+
## Learning React Redux
130+
131+
### Learn Modern Redux Livestream
132+
133+
Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
134+
135+
See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
136+
137+
<LiteYouTubeEmbed
138+
id="9zySeP5vH9c"
139+
title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
140+
/>
141+
142+
## Help and Discussion
143+
144+
The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
145+
146+
You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
147+
148+
## Docs Translations
149+
150+
- [Portuguese](https://fernandobelotto.github.io/react-redux)

docs/tutorials/quick-start.md

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
---
2+
id: quick-start
3+
title: Quick Start
4+
sidebar_label: Quick Start
5+
hide_title: true
6+
---
7+
8+
&nbsp;
9+
10+
# React Redux Quick Start
11+
12+
:::tip What You'll Learn
13+
14+
- How to set up and use Redux Toolkit with React Redux
15+
16+
:::
17+
18+
:::info Prerequisites
19+
20+
- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
21+
- Knowledge of React terminology: [JSX](https://react.dev/learn/writing-markup-with-jsx), [State](https://react.dev/learn/state-a-components-memory), [Function Components, Props](https://react.dev/learn/passing-props-to-a-component), and [Hooks](https://react.dev/reference/react#)
22+
- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)
23+
24+
:::
25+
26+
## Introduction
27+
28+
Welcome to the React Redux Quick Start tutorial! **This tutorial will briefly introduce you to React Redux and teach you how to start using it correctly**.
29+
30+
### How to Read This Tutorial
31+
32+
This page will focus on just how to set up a Redux application with Redux Toolkit and the main APIs you'll use. For explanations of what Redux is, how it works, and full examples of how to use Redux Toolkit, see [the Redux core docs tutorials](https://redux.js.org/tutorials/index).
33+
34+
For this tutorial, we assume that you're using Redux Toolkit and React Redux together, as that is the standard Redux usage pattern. The examples are based on [a typical Create-React-App folder structure](https://create-react-app.dev/docs/folder-structure) where all the application code is in a `src`, but the patterns can be adapted to whatever project or folder setup you're using.
35+
36+
The [Redux+JS template for Create-React-App](https://github.com/reduxjs/cra-template-redux) comes with this same project setup already configured.
37+
38+
## Usage Summary
39+
40+
### Install Redux Toolkit and React Redux
41+
42+
Add the Redux Toolkit and React Redux packages to your project:
43+
44+
```sh
45+
npm install @reduxjs/toolkit react-redux
46+
```
47+
48+
### Create a Redux Store
49+
50+
Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
51+
52+
```js title="app/store.js"
53+
import { configureStore } from '@reduxjs/toolkit'
54+
55+
export default configureStore({
56+
reducer: {},
57+
})
58+
```
59+
60+
This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
61+
62+
### Provide the Redux Store to React
63+
64+
Once the store is created, we can make it available to our React components by putting a React Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
65+
66+
```js title="index.js"
67+
import React from 'react'
68+
import ReactDOM from 'react-dom/client'
69+
import './index.css'
70+
import App from './App'
71+
// highlight-start
72+
import store from './app/store'
73+
import { Provider } from 'react-redux'
74+
// highlight-end
75+
76+
// As of React 18
77+
const root = ReactDOM.createRoot(document.getElementById('root'))
78+
79+
root.render(
80+
// highlight-next-line
81+
<Provider store={store}>
82+
<App />
83+
</Provider>,
84+
)
85+
```
86+
87+
### Create a Redux State Slice
88+
89+
Add a new file named `src/features/counter/counterSlice.js`. In that file, import the `createSlice` API from Redux Toolkit.
90+
91+
Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.
92+
93+
Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
94+
95+
```js title="features/counter/counterSlice.js"
96+
import { createSlice } from '@reduxjs/toolkit'
97+
98+
export const counterSlice = createSlice({
99+
name: 'counter',
100+
initialState: {
101+
value: 0,
102+
},
103+
reducers: {
104+
increment: (state) => {
105+
// Redux Toolkit allows us to write "mutating" logic in reducers. It
106+
// doesn't actually mutate the state because it uses the Immer library,
107+
// which detects changes to a "draft state" and produces a brand new
108+
// immutable state based off those changes.
109+
// Also, no return statement is required from these functions.
110+
state.value += 1
111+
},
112+
decrement: (state) => {
113+
state.value -= 1
114+
},
115+
incrementByAmount: (state, action) => {
116+
state.value += action.payload
117+
},
118+
},
119+
})
120+
121+
// Action creators are generated for each case reducer function
122+
export const { increment, decrement, incrementByAmount } = counterSlice.actions
123+
124+
export default counterSlice.reducer
125+
```
126+
127+
### Add Slice Reducers to the Store
128+
129+
Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducer` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
130+
131+
```js title="app/store.js"
132+
import { configureStore } from '@reduxjs/toolkit'
133+
// highlight-next-line
134+
import counterReducer from '../features/counter/counterSlice'
135+
136+
export default configureStore({
137+
reducer: {
138+
// highlight-next-line
139+
counter: counterReducer,
140+
},
141+
})
142+
```
143+
144+
### Use Redux State and Actions in React Components
145+
146+
Now we can use the React Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
147+
148+
```jsx title="features/counter/Counter.js"
149+
import React from 'react'
150+
import { useSelector, useDispatch } from 'react-redux'
151+
import { decrement, increment } from './counterSlice'
152+
import styles from './Counter.module.css'
153+
154+
export function Counter() {
155+
const count = useSelector((state) => state.counter.value)
156+
const dispatch = useDispatch()
157+
158+
return (
159+
<div>
160+
<div>
161+
<button
162+
aria-label="Increment value"
163+
onClick={() => dispatch(increment())}
164+
>
165+
Increment
166+
</button>
167+
<span>{count}</span>
168+
<button
169+
aria-label="Decrement value"
170+
onClick={() => dispatch(decrement())}
171+
>
172+
Decrement
173+
</button>
174+
</div>
175+
</div>
176+
)
177+
}
178+
```
179+
180+
Now, any time you click the "Increment" and "Decrement buttons:
181+
182+
- The corresponding Redux action will be dispatched to the store
183+
- The counter slice reducer will see the actions and update its state
184+
- The `<Counter>` component will see the new state value from the store and re-render itself with the new data
185+
186+
## What You've Learned
187+
188+
That was a brief overview of how to set up and use Redux Toolkit with React. Recapping the details:
189+
190+
:::tip Summary
191+
192+
- **Create a Redux store with `configureStore`**
193+
- `configureStore` accepts a `reducer` function as a named argument
194+
- `configureStore` automatically sets up the store with good default settings
195+
- **Provide the Redux store to the React application components**
196+
- Put a React Redux `<Provider>` component around your `<App />`
197+
- Pass the Redux store as `<Provider store={store}>`
198+
- **Create a Redux "slice" reducer with `createSlice`**
199+
- Call `createSlice` with a string name, an initial state, and named reducer functions
200+
- Reducer functions may "mutate" the state using Immer
201+
- Export the generated slice reducer and action creators
202+
- **Use the React Redux `useSelector/useDispatch` hooks in React components**
203+
- Read data from the store with the `useSelector` hook
204+
- Get the `dispatch` function with the `useDispatch` hook, and dispatch actions as needed
205+
206+
:::
207+
208+
### Full Counter App Example
209+
210+
Here's the complete Counter application as a running CodeSandbox:
211+
212+
<iframe
213+
class="codesandbox"
214+
src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark&runonclick=1"
215+
title="redux-essentials-example"
216+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
217+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
218+
></iframe>
219+
220+
## What's Next?
221+
222+
We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit and React Redux do, and how to use it correctly.

0 commit comments

Comments
 (0)