DEV Community

loading...
Cover image for What is mapStateToProps in Redux?

What is mapStateToProps in Redux?

terrythreatt profile image Terry Threatt ・2 min read

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

Discussion (2)

pic
Editor guide
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 Author

Thanks, and yes this is very helpful!