MAPSTATETOPROPS & MAPDISPATCHTOPROPS: The Bad Boys of React-Redux

Author profile picture

@urchmaneyUnegbu kingsley

INTRODUCTION

During my journey with react, I found a concept difficult to grasp and I see new react developers struggle with it. Which concept am I talking about? I am talking about the
mapstatetoprops
and
mapdispatchtoprops
concept. At first, when I came across it, I asked myself what are we mapping? why do we need that code? what goes in it? Well, we will break it down here.

PREREQUISITES OVERVIEW

Before we dive in, there are some ideas you need to be familiar with.
Familiarity with these concepts will make the article make more sense.

GENERAL IDEOLOGY

In react, components has state. But their state is scoped for themselves and inner components. Also, their state gets refreshed when reloaded. This will be a problem when you need to store states for the whole application. States that will be accessible to all components and editable by them. Redux is here for you. Redux keeps state for your entire application with the help of its store. Components can request and perform actions to the Redux store state. An important note is that the redux store only changes its state when an action is dispatched. That is, you can only change a redux state by sending an action to the store dispatch function. This helps unify the way the store can be changed.

MAPSTATETOPROPS

Mapstatetoprops
is a function that takes a parameter and returns an object, this parameter is the redux store state. It injects the state into the function under the hood. It returns an object which will hold all the state you need in your component props. This object will be an object of values. Lets take for example :
Assume that this our redux store state.
{
  username: 'uchenna',
  age: 17,
  sex: 'male',
  isAdmin: false,
}
and we need our component to have '
username
' and '
isAdmin
' as props. We then need to map the state to the component props as the name suggest(MAP-STATE-TO-PROPS).
we have :
const mapStateToProps = (state) => ({
  name: state.username,
  isAdmin: state.isAdmin,
});
So, as the component is created, it has two more props. which are name, holding the redux state
username
, and
isAdmin
, holding the redux state
isAdmin
property.

MAPDISPATCHTOPROPS

To change a redux state, we send actions to the redux store dispatch function. but how do we get the redux dispatch function?
mapdispatchtoprops
helps with that.
mapdispatchtoprops
is a function that takes redux store dispatch function as a parameter. And returns an object of functions. these object which it returns hold all the functions you need to inject into the component props.
Let's take an example, we have an action :
const setName = (name) => ({
  type: 'SET_NAME',
  name,
})
and a reducer :
const name = (state = '', action) => {
  switch(action.type) {
    case 'SET_NAME':
      return action.name;
    default :
       return state;
  }

}
And you need to set a user name in a component. To do that, you need to send the '
setName
' action to redux dispatch function. The
mapdispatchtoprops
help create a function that dispatches the action in its body and add the function to the component props.
const mapDispatchToProps = (dispatch) => ({
  setName: (name) => dispatch(setName(name)),
})
With the code above, you now have added '
setName
' function to the component props.

CONNECT

We have been talking about
mapstatetoprops
and
mapdispatchtoprops
, but how do these functions get the redux store state and dispatch function? Here comes the connect function. The connect function is the link that provides the redux state and dispatch function. That is, if we don't have the connect function in our component,
mapstatetoprops
, and
mapdispatchtoprops
won't work. Sample of connect function.
connect(mapStateToProps, mapDispatchToProps)([component Name])

CONCLUSION

Mapstatetoprops
and
Mapdispatchtoprops
are very useful when working with react and redux. They are the link between them. With a good understanding of the mapping concept, you are on your way to becoming a redux lord.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!