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 and 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. mapstatetoprops mapdispatchtoprops PREREQUISITES OVERVIEW Before we dive in, there are some ideas you need to be familiar with. . Understanding of react Familiarity with redux store. . Understanding react actions Understanding react reducers. 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 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 : Mapstatetoprops Assume that this our redux store state. { : , : , : , : , } username 'uchenna' age 17 sex 'male' isAdmin false and we need our component to have ' ' and ' ' as props. We then need to map the state to the component props as the name suggest(MAP-STATE-TO-PROPS). username isAdmin we have : mapStateToProps = ({ : state.username, : state.isAdmin, }); const ( ) => state name isAdmin So, as the component is created, it has two more props. which are name, holding the redux state , and , holding the redux state property. username isAdmin isAdmin MAPDISPATCHTOPROPS To change a redux state, we send actions to the redux store dispatch function. but how do we get the redux dispatch function? helps with that. 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. mapdispatchtoprops mapdispatchtoprops Let's take an example, we have an action : setName = ({ : , name, }) const ( ) => name type 'SET_NAME' and a reducer : name = { (action.type) { : action.name; : state; } } const ( ) => state = , action '' switch case 'SET_NAME' return default return And you need to set a user name in a component. To do that, you need to send the ' ' action to redux dispatch function. The help create a function that dispatches the action in its body and add the function to the component props. setName mapdispatchtoprops mapDispatchToProps = ({ : dispatch(setName(name)), }) const ( ) => dispatch setName ( ) => name With the code above, you now have added ' ' function to the component props. setName CONNECT We have been talking about and , 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, , and won't work. Sample of connect function. mapstatetoprops mapdispatchtoprops mapstatetoprops mapdispatchtoprops connect(mapStateToProps, mapDispatchToProps)([component Name]) CONCLUSION and 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. Mapstatetoprops Mapdispatchtoprops
![Integrating Redux to your React App [A Step by Step Guide]](https://hackernoon.imgix.net/drafts/vz3qu3y8i.png?auto=format&fit=max&w=3840)
