1,824 reads

MAPSTATETOPROPS & MAPDISPATCHTOPROPS: The Bad Boys of React-Redux

by Unegbu kingsleyFebruary 13th, 2020

Too Long; Didn't Read

Redux keeps state for your entire application with the help of its store. Components can request and perform actions to the Redux store state. This helps unify the way the store can be changed. Components have state scoped for themselves and inner components and their state gets refreshed when reloaded. This will be a problem when you need to store states for the whole application. The Redux store store 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 a object which will hold all the state you need in your component props.

featured image - MAPSTATETOPROPS & MAPDISPATCHTOPROPS: The Bad Boys of React-Redux

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.