-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Drop versioned docs entirely (#1696)
- Loading branch information
1 parent
45dfd45
commit 9005c4a
Showing
19 changed files
with
249 additions
and
425 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
--- | ||
id: getting-started | ||
title: Getting Started | ||
hide_title: true | ||
sidebar_label: Getting Started | ||
--- | ||
|
||
# Getting Started with React Redux | ||
|
||
[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) 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. | ||
|
||
## Installation | ||
|
||
React Redux 7.1+ requires **React 16.8.3 or later**, in order to make use of React Hooks. | ||
|
||
### Using Create React App | ||
|
||
The recommended way to start new apps with React Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of [Redux Toolkit](https://redux-toolkit.js.org/). | ||
|
||
```sh | ||
npx create-react-app my-app --template redux | ||
``` | ||
|
||
### An Existing React App | ||
|
||
To use React Redux with your React app, install it as a dependency: | ||
|
||
```bash | ||
# If you use npm: | ||
npm install react-redux | ||
|
||
# Or if you use Yarn: | ||
yarn add react-redux | ||
``` | ||
|
||
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. | ||
|
||
If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped. You'll need to install those as well: | ||
|
||
```bash | ||
npm install @types/react-redux | ||
``` | ||
|
||
## `Provider` | ||
|
||
React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app: | ||
|
||
```js | ||
import React from 'react' | ||
import ReactDOM from 'react-dom' | ||
|
||
import { Provider } from 'react-redux' | ||
import store from './store' | ||
|
||
import App from './App' | ||
|
||
const rootElement = document.getElementById('root') | ||
ReactDOM.render( | ||
<Provider store={store}> | ||
<App /> | ||
</Provider>, | ||
rootElement | ||
) | ||
``` | ||
|
||
## Hooks | ||
|
||
React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store. | ||
|
||
`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. | ||
|
||
```js | ||
import React, { useState } from 'react' | ||
import { useSelector, useDispatch } from 'react-redux' | ||
import { | ||
decrement, | ||
increment, | ||
incrementByAmount, | ||
incrementAsync, | ||
selectCount | ||
} from './counterSlice' | ||
import styles from './Counter.module.css' | ||
|
||
export function Counter() { | ||
const count = useSelector(selectCount) | ||
const dispatch = useDispatch() | ||
const [incrementAmount, setIncrementAmount] = useState('2') | ||
|
||
return ( | ||
<div> | ||
<div className={styles.row}> | ||
<button | ||
className={styles.button} | ||
aria-label="Increment value" | ||
onClick={() => dispatch(increment())} | ||
> | ||
+ | ||
</button> | ||
<span className={styles.value}>{count}</span> | ||
<button | ||
className={styles.button} | ||
aria-label="Decrement value" | ||
onClick={() => dispatch(decrement())} | ||
> | ||
- | ||
</button> | ||
</div> | ||
{/* omit additional rendering output here */} | ||
</div> | ||
) | ||
} | ||
``` | ||
|
||
## Help and Discussion | ||
|
||
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! | ||
|
||
You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**. | ||
|
||
## Docs Translations | ||
|
||
- [Portuguese](https://fernandobelotto.github.io/react-redux) |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.