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 };
  };
}

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!

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 

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

Comments

[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 };
};

[Terry Threatt]

Thanks, and yes this is very helpful!

[Artem]

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.