What is mapStateToProps and mapDispatchToProps ?

MapStateToProps : mapStateToProps() function receives the state from the store as its argument that is called mapStateToProps. mapStateToProps() is not reference our store in our component when retrieving the state.
MapDispatchToProps : mapDispatchToProps() receives the dispatch function from the store that is called mapDispatchToProps. We use mapDispatchToProps() by passing our connect() function a second argument that adds new props to the function, that point to action creators.

we updated the ./src/App.js file.

  1. Selectors to grab our data out of reducers.
  2. Reselect to combine our selectors into a single selector.
  3. This single selector can be used directly in mapStateToProps.
  4. Action creators and mapDispatchToProps shorthand.
  5. We don’t declare functions for mapStateToProps and mapDispatchToProps since we know they’re the first arguments to connect.
Bind Action Creators

So we know that it’s not good enough to pass through a prop that we can use to execute an action creator. What we need is the ability to execute the store’s dispatch function and pass the dispatch function the return value of the action creator. By accessing a function from the Redux library called bindActionCreators(). we can do as like this.

we have to say what we would like to eventually dispatch. We do this by using our bindActionCreators() function from Redux, and passing to it, our new props, as well as the store’s dispatch function.

In this lesson we saw that we can remove all reference to our store from our component via the mapDispatchToProps() function. We saw that mapDispatchToProps() allows us to pass through our action creator as a prop, and that by using Redux’s bindActionCreators() function, we can wrap the action creator in our store’s dispatch function, so that the action is properly dispatched to the store.

Leave a Reply

Be the First to Comment!

Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.