DEV Community

Cover image for What is mapStateToProps in Redux?
Terry Threatt
Terry Threatt

Posted on

What is mapStateToProps in Redux?

If you are an experienced ReactJS developer and you are familiar with Redux then you have heard or seen the mapStateToProps function out in the wild. As a Javascript new developer, it is not entirely clear what the purpose of this function is and how to use it properly in your components.

I will give you a quick rundown on the mapStateToProps function and an example to make it plain.

Redux

Redux is a predictable state container for Javascript applications. It is commonly used to create a consistent and centralized flow of data to large scalable codebases.

In the example, I will be utilizing React-Redux, the official ReactJS bindings for Redux for clarity.

mapStateToProps

The mapStateToProps function is used in the Redux pattern to reflect any updates to the Redux store and merge them into props in your component. The Redux store serves as a centralized place for the state to live in your application.

Here is an example of state from our Redux store being passed into our function to return a POJO - (plain old Javascript object) as a prop for our component to utilize.



const mapStateToProps = (state) => {
  return { ingredients: state.ingredients };
  };
}


Enter fullscreen mode Exit fullscreen mode

Ahh... we now can get the ingredient count necessary to make our matcha tea.



render() {
    return (
      <div className="App">
        <button onClick={() => this.handleOnClick()}>
          Make Matcha 
        </button>
        <h3>Ingredient Count:</h3>
        <p>{this.props.ingredients.length}</p> 
      </div>
    );
  } // mapStateToProps in action!


Enter fullscreen mode Exit fullscreen mode

Redux Matcha

Things to note

  • mapStateToProps may receive two parameters:

example - mapStateToProps(state, ownProps)

state - Current state in the Redux store or store.getState().

ownProps - (optional) If a component needs data from props to get back data from the store.

  • Return value determines re-render

If the returned value in your mapStateToPros is different then your component will trigger a re-render but if it's the same then there will be no re-render.

Connect

The mapStateToProps function is wrapped in a connect function provided by the React-Redux library. The connect function will allow four optional parameters with mapStateToProps being the first and if no other is provided then a dispatch function will be automagically created to access in props. It also is a wrapper for the entire component and is immediately invoked as connect is called.



import React, { Component } from 'react';
import { connect } from 'react-redux';
import './App.css';

class App extends Component {

handleOnClick() {
this.props.dispatch({
type: 'MIX_MATCHA',
}); // Whoa, this dispatch function appeared from thin air!
}

render() {
return (
<div className="App">
<button onClick={() => this.handleOnClick()}>
Make Matcha
</button>
<h3>Ingredient Count:</h3>
<p>{this.props.ingredients.length}</p>
</div>
);
}
};

const mapStateToProps = (state) => {
return { ingredients: state.ingredients };
};

export default connect(mapStateToProps)(App); // connect wrapper function in use

Enter fullscreen mode Exit fullscreen mode




Conclusion

So we now know how we may utilize the mapStateToProps to take advantage of data store in Redux efficiently and we also learned a bit about how the connect wrapper function works with the mapStateToProps function to get the job done.

If you enjoyed this post feel free to leave a comment about your next Redux project.

Happy Coding,
Terry Threatt

Top comments (3)

Collapse
 
clarity89 profile image
Alex K.

Nice write up! You can also simplify mapStateToProps, which is particularly helpful if you need to map multiple values:

const mapStateToProps = ({ingredients}) => {
  return { ingredients };
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
terrythreatt profile image
Terry Threatt

Thanks, and yes this is very helpful!

Collapse
 
flamesoff profile image
Artem • Edited

First, the example is not complete. Where is the state code? How can we tell from this which approach was used to create the state?
Second, where's react and redux versions? This code just doesn't work, component doesn't update its view on state update.