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-reduxProvider 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.
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 acceptsstateas a parameter and returns an object. -
mapDispatchToProps: it is also a function which acceptsdispatchas a parameter and returns an
object with dispatching functions.
Let’s see in action.
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.
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);- Share:
