Quick Start

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

Installation

React Redux 7.2 requires React 16.8.3 or later.

Using Create React App

The recommended way to start new apps with React Redux is by using the official Redux+JS template for Create React App, which takes advantage of Redux Toolkit.

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:

# If you use npm:

npm install react-redux

# Or if you use Yarn:

yarn add react-redux

You'll also need to install Redux and set up a Redux store in your app.

Provider

React Redux provides <Provider />, which makes the Redux store available to the rest of your app:

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

)

connect()

React Redux provides a connect function for you to connect your component to the store.

Normally, you’ll call connect in this way:

import { connect } from 'react-redux'

import { increment, decrement, reset } from './actionCreators'

// const Counter = ...

const mapStateToProps = (state /*, ownProps*/) => {

return {

counter: state.counter,

}

}

const mapDispatchToProps = { increment, decrement, reset }

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

Help and Discussion

The #redux channel of the Reactiflux Discord community 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 using the #redux tag.

Docs Translations

• Portuguese