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

To use React-Redux with your React app:

npm install --save react-redux

or

yarn add react-redux

Provider and connect

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);