Overview
mapDispatchToProps
gives your props indirect access to Redux's dispatch
function. dispatch
passes an action (a JavaScript object) to your reducer so your application’s state can update.
The props that get access to dispatch
belong to the file that is written in the Redux connect
function's second set of parentheses. For example, in App.js
, if you write the line
export default connect(null, mapDispatchToProps)(App);
only the props for App.js
will receive indirect access to the dispatch function.
How to Use mapDispatchToProps
(The following assumes you are building a React app with a Redux store already configured).
Let's say we are making a React app that will allow us to write reviews for something. To add a new review object to our Redux store, we will do the following in the class component ReviewsContainer.js
:
Make sure
react-redux
is listed in yourpackage.json
file. Also, in the terminal inside your project's directory, make sure you have runnpm install
.At the top of the file, add the line
import { connect } from 'react-redux';
. This will grant your file access to Redux'sconnect
function.At the bottom of the file, add the line
export default connect(null, mapDispatchToProps)(ReviewsContainer);
. This lets our file usemapDispatchToProps
. Thenull
can be replaced withmapStateToProps
. TheReviewsContainer
part is the name of the file we're working in.Write your
mapDispatchToProps
function. This function goes outside of the class. The function returns an object with keys that we'll use later via props. If our goal is to add a review to our Redux store, we could write:
const mapDispatchToProps = dispatch => ({
addReview: reviewObject =>
(dispatch({ type: "ADD_REVIEW", payload: reviewObject }))
})
The syntax is convoluted but can be understood like this:
The function takes in an argument of dispatch
and returns an object with a key of addReview
. (dispatch
is provided by Redux's connect
function).
The addReview
key points to a value which is an anonymous function. The anonymous function returns an expression that uses the dispatch
function to send an action to the reducer. The action is this part: { type: "ADD_REVIEW", payload: reviewObject }
. Your reducer will expect an action.type
of 'ADD_REVIEWS'
and an action.payload
of reviewObject
. The word "payload" just means the data, the meat and potatoes, that is given to the reducer.
-
To actually add a review, we could call
this.props.addReview(reviewObject)
somewhere in ourReviewsContainer
class. This will invoke the following anonymous function:
reviewObject => (
dispatch({ type: "ADD_REVIEW", payload: reviewObject })
)
(This function is the value of the addReview
key of our mapDispatchToProps
function).
We can give that function a review object, which can be retrieved by using action.payload in the reducer.
-
(optional) If you want to add another key-value pair in your
mapDispatchToProps
function, you could write the following, which will create a deleteReview action you can send to your reducer:
const mapDispatchToProps = dispatch => ({
addReview: reviewObject => (
dispatch({ type: "ADD_REVIEW", payload: reviewObject })
),
deleteReview: id => (
dispatch({ type: "DELETE_REVIEW", payload: id })
)
})
Conclusion
mapDispatchToProps
is a function that one writes to dispatch actions to the reducer. mapDispatchToProps
itself returns an object with any number of key-value pairs. Each key points to an anonymous function declaration that will dispatch an action object to the reducer. To invoke the anonymous function, you can call this.props.<keyOfAnonymousFunction>()
somewhere in your class.
In the end, ReviewsContainer.js
looks like this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class ReviewsContainer extends Component {
render() {
let reviewObject = {content: "good"}
return (
<div>
{this.props.addReview(reviewObject)}
{this.props.deleteReview({id: 5})}
</div>
)
}
}
const mapDispatchToProps = dispatch => ({
addReview: reviewObject => (
dispatch({ type: "ADD_REVIEW", payload: reviewObject })
),
deleteReview: id => (
dispatch({ type: "DELETE_REVIEW", payload: id })
)
})
export default connect(null, mapDispatchToProps)(ReviewsContainer);
Top comments (0)