by Sai gowtham

React Redux connect function tutorial

In this tutorial, we are going to learn about how to connect the react app with redux store by using connect() function.

This is our example redux store with two action types INCREMENT and DECREMENT.

function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":      return {
        ...state,
        count: state.count + 1
      };
    case "DECREMENT":      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
}

export default reducer;

Now, we need to install a new package called react-redux which provides us react bindings to access the redux store and dispatch actions to update the store.

Run the below command in your terminal to install the package.

npm i react-redux

Provider component

React redux package gives us the <Provider> component, which helps us to pass the redux store to nested react components.

To do that we need to wrap our root App component with a <Provider> component by passing the store as a prop.

index.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";import reducer from "./store";
import App from "./app";

const store = createStore(reducer);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>    <App />
  </Provider>,
  rootElement
);

connect() function

connect function gives us access to the redux store inside the react components.

connect function takes your react component as an argument and gives back a new component with redux store data is available as a component props.

connect function accepts two optional arguments which are mapStateToProps and mapDispatchToProps.

  • mapStateToProps: it is a function which accepts state as a parameter and returns an object.
  • mapDispatchToProps: it is also a function which accepts dispatch as a parameter and returns an object with dispatching functions.

Let’s see in action.

App.js
import React, { Component } from "react";
import { connect } from "react-redux";
class App extends Component {
  render() {
    return (
      <div>
        <p>{this.props.count}</p>        <button onClick={this.props.increment}>Increment</button>        <button onClick={this.props.decrement}>Decrement</button>      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    count: state.count  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),    decrement: () => dispatch({ type: "DECREMENT" })  };
};

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

In the above code, we first imported connect function from the react-redux package then we created two functions mapStateToProps , mapDispatchToProps .

In the last line, we invoked the connect() function by passing two functions and App component, so that we can access the store state and dispatch functions as a App component props.

Bonus

If you don’t like to access the redux store state you can pass the first argument as a null to the connect() function.

export default connect(null,mapDispatchToProps)(App);

By default, the dispatch() method is available as a component prop so that we can directly dispatch the actions inside a event handler methods.

App.js
import React, { Component } from "react";
import { connect } from "react-redux";

class App extends Component {

  handleIncrement = () => {
    this.props.dispatch({ type: "INCREMENT" });  };

  handleDecrement = () => {
    this.props.dispatch({ type: "DECREMENT" });  };

  render() {
    return (
      <div>
        <p>{this.props.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

export default connect(mapStateToProps)(App);

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course