React Redux connect function tutorial

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 <Provider> component which helps us to pass the redux store to nested react components.

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 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 props inside App component.

Bonus

If you don’t like to access the redux store state you can pass the first argument as a null to 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 mapStateprops = state => {
  return {
    count: state.count
  };
};

export default connect(mapStateprops)(App);