With Redux, we can use it to store data in a central location in our JavaScript app. It can work alone and it’s also a popular state management solution for React apps when combined with React-Redux.
In this article, we’ll look at how to use mapStateToProps to subscribe to the store’s state and them to a React component’s props.
mapStateToProps Definition
The React Redux’s mapStateToProps has 2 parameters. The first is the state and the second is an optional ownProps parameter.
It returns a plain object containing the data that the connected component needs.
It doesn’t matter if it’s a traditional function or an arrow function. Both kinds will give the same result.
The first argument, which is state , has the entire Redux store state. It’s the same value returned by store.getState() .
It’s usually called state . However, we can call it whatever we want.
The second parameter, ownProps , is an optional parameter that has the props of a component.
In the following example:
import React from "react";
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";
import { createStore } from "redux";
function message(state = "hello", action) { switch (action.type) { default: return state; } }
const store = createStore(message);
function Message({ color, message }) { return <div style={{ color }}>{message}</div>; }
const mapStateToProps = (state, ownProps) => {
const { color } = ownProps;
return { color, message: state };
};
Message = connect(mapStateToProps)(Message);
function App() {
return (
<div className="App">
<Message color="blue" />
</div>
);
}
const rootElement = document.getElementById("root"); ReactDOM.render( <Provider store={store}> <App /> </Provider>, rootElement );
`ownProps` would have the value of the `color` prop because that’s what we passed in.
In this case, that should be`blue` .
From the `mapStateToProps` function, we should also get the state from the store. In this case, we get the `'hello'` string returned from the `message` reducer function. So we should see ‘hello’ in the browser screen.
`mapStateToProps` function should be pure and synchronous. It only take the `state` and `ownProps` and return something that’s derived from it by running synchronous code.
This means no asynchronous HTTP calls, `setTimeout` , async functions, etc.
### Return Values Determine If Your Component Re-Renders
React-Redux internally implements the `shouldComponentUpdate` method. Therefore, the `Provider` will re-render when the data of our component has changed.
Data also includes entities retrieved from `mapStateToProps` .
The comparison is done by using the `===` comparison on each field of the returned object.
`mapStateToProps` runs when the store `state` changes. Or when `state` changes or `ownProps` is different if both `state` and `ownProps` are referenced.
The component re-renders when any field that’s returned by `mapStateToProps` is different.
If both `state` and `ownProps` are referenced in `mapStateToProps` , the component re-renders when any field of `stateProps` or `ownProps` are different.
### Only Return New Object References If Needed
Because `mapStateToProps` and re-rendering is done when we return new object or array references, we should only return new objects when we need them.
Therefore, we should avoid any code that returns new objects, like `array.map()` , `array.filter()` , etc.
If we need to run code that returns new object references, then they should be memoized so that they don’t trigger re-render even if their content is the same.
Photo by [Pineapple Supply Co.](https://unsplash.com/@pineapple?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)
### `mapStateToProps` Will Not Run if the Store State is the Same
Every time an action is dispatched, `store.getState()` is called to check if the previous state and the current state are the same.
If both states are identical by reference, then `mapStateToProps` won’t be run again since it assumes that the rest of the store haven’t changed.
`combineReducers` returns the old state object instead of the new one if there’re no changes in the store’s state.
### The Number of Declared Arguments Affects Behavior
If `ownProps` is omitted from the parameters, then `ownProps` won’t be retrieved. Therefore, we should only add `ownProps` to the parameter is we need it.
For example, if we have the following `mapStateToProps` function:
function mapStateToProps(state) { console.log(state) console.log(arguments[1]) }
The `arguments[1]` is `undefined` since we didn’t include the `ownProps` parameter.
### Conclusion
We can define `mapStateToProps` and use it to get the latest state from our Redux Store to our React app via the `connect` function.
It has 2 parameters, which are `state` for the store’s state and `ownProps` for the props that we pass into the component ourselves.
The `connect` function lets us pass in `mapStateToProps` as the first argument and returns a function where we can pass in our component into the it and returns a new component that subscribes to the store’s state and gets it as props.
