1

This is sort of a general theory question.

What is the purpose of using mapStateToProps to select a specific set of data from the Store and send it into the component as a Prop, when all of that data is already globally available to all components in the store?

Another way to phrase it would be, why am I going through the extra step of mapping state to props so that I can access the data with props.something when I could just access it with state.something?

NickC
  • 332
  • 1
  • 15
  • 1
    _"when all of that data is already globally available to all components in the store?"_ - How is all the data already available to all the components? Components have access to only that data in the redux store that is passed to them as props. – Yousaf Oct 10 '20 at 12:28
  • I believe that it must be based on the following. Inside of a component if I am creating my map state to props function like so `const mapStateToProps = (state) => { return { streams: Object.values(state.streams) }; };` I am taking in state as an argument there... which means it is available there? Although I guess that this is a callback function, so when it gets executed in the store it is actually available there, and not here in the component... I may have just answered my own question. – NickC Oct 10 '20 at 12:32
  • If I console log `state.streams` I am told that it is undefined so state would actually be undefined within the scope of this component. – NickC Oct 10 '20 at 12:36
  • Does this answer your question? [Understanding React-Redux and mapStateToProps()](https://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops) – Mehdi Dehghani Oct 10 '20 at 13:38

2 Answers2

1

Components do not have access to all the data in the redux store. They only have access to that data in the redux store that is passed to them as props.

As far as your question of what's the purpose of mapStateToProps, is concerned, following are the main uses of mapStateToProps:

  • Tell react-redux what data any particular component needs.
  • Transform the store state and pass the transformed state to the component as a prop
  • Help react-redux decide whether a particular component should re-render as a result of store update.

Tell React-Redux what data component needs

mapStateToProps function tells react-redux what data a particular component needs from the redux store. This function gets the whole state as an argument but the problem is that you can't access this inside the React component. It is passed to mapStateToProps function, not to your component. So you need react-redux to pass the required data to your component as props.

Transforming Store State

.mapStateToProps function can also be used to transform the store state in such a way that is appropriate for any particular component, for example:

  • Combining different pieces of state from different parts of the store.
  • Passing a data as a specific prop name
  • Transforming data in any way that is appropriate for use by the component.

Help React-Redux decide whether a particular component should be re-rendered

Now you might ask, what if i tell react-redux to pass whole state argument to my component as a prop?

Problem with doing this is that whenever the state in the redux store updates, your component will re-render even if it didn't use any part of the state that changed.

This behavior is caused by how react-redux uses mapStateToProps function to decide whether a component should be re-rendered as a result of store's state update.

Whenever redux store updates, react-redux does a shallow comparison (===) of each field of the object returned by mapStateToProps function and if any of the field is different, your component will be re-rendered.

To prevent this behavior, you use mapStateToProps function to only get that data that is actually used inside the component. This way, if any un-related data is updated in the redux store, it won't cause a re-render of your component.

For more details of mapStateToProps function, see:

React Redux: Extracting Data with mapStateToProps

Yousaf
  • 27,861
  • 6
  • 44
  • 69
  • 1
    That is the answer right there, this prevents your component from re-rendering if an unrelated piece of state gets updated. – NickC Oct 10 '20 at 12:49
0

This is because of the reason that the data is present in Redux Store.So to access that data we have to pass this HOC (Higher Order Component) mapStateToProps and wrap it around our component like for example TodoList in our case

connect(mapStateToProps)(TodoList)
  • So to access store's state data we have to first get it through props.
  • In short the data present inside Store has been accessed inside a component through props and not with a state.Since the State is native to the Store and not the component where we are using it.
Fahad Shinwari
  • 968
  • 7
  • 7