id | title | hide_title | sidebar_label |
---|---|---|---|
quick-start |
Quick Start |
true |
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.
React Redux 7.2 requires React 16.8.3 or later.
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
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.
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
)
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)
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.