DispatchToProps() method in React Redux Code Answer

I’ve been going through some react – redux code and I’m stuck on the below code snippet

const mapDispatchToProps=dispatch=>({
    addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment))
 })

I’m not that experienced in Javascript so it would be good to get a clarification on what this mapDispatchToProps method is accomplishing.

I know what this method is, I’m just confused on the Javascript part

Answer

mapDispatchToProps is the second argument of the connect function in redux. mapStateToProps is the first. You define mapDispatchToProps as a function of dispatch, which returns an object. The syntax const something = dispatch => ({ ... }) is a shorthand for an arrow function which returns an object. It is almost the same as

function mapDispatchToProps(dispatch){
  return {
    addComment: (dishId, ...) => dispatch(addComment(dishId, ...))
  }
}

When you feed mapDispatchToProps to connect, and then wrap your component in that connect, it injects the properties and methods of the returned object into the component, as props. Hence the name mapXToProps. It will usually be used like this:

export default connect( mapStateToProps, mapDispatchToProps )(Component)

If you don’t have a mapStateToProps, use null in its place. mapDispatchToProps allows you to inject your redux actions into your component, so that you can affect the redux store through the props on your component. mapStateToProps is similar – it allows you to grab items from your redux store, and assign them to props on your component. In your example, you would now be able to access this.props.addComment as a prop on your wrapped component. This is how you connect your components to the redux store, and how you can send and recieve data to the store.

Note that these are just naming conventions. You can actually name these functions whatever you want – but most people use mapStateToProps and mapDispatchToProps, as its pretty descriptive of what’s hapenning. You can name them puppy and booya for all redux cares, so long as you feed them to connect properly.

Obligatory read the docs. Though to be frank when I was learning this, someone had to actually explain it to me too, but the docs are a great resource.