How to integrate redux in react?

Installation

React Redux 7.x requires React 16.8.3+. use below command to install redux in your React web app.

Using npm

npm i react-redux --save

Using yarn

yarn add react-redux

after installation of package you need to setup redux store in your app.

Setup

React redux provide <Provider />, by using this Redux store available in your entire React application. you can use <Provider /> as below.;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import rootStore from './store';
import App from './App';

const appElement = document.getElementById('app')

ReactDOM.render(
  <Provider store={rootStore}>
    <App />
  </Provider>,
  appElement
);

By using above code example redux store is available to your rest of app. now let’s move to next step which is connect() function. which help to connect redux store to your components.

import { connect } from 'react-redux';
import { increment, decrement } from './action';

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
};

const mapDispatchToProps = { increment, decrement };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

For more detail about Provider & connect you can checkout here.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp