11

I've read this thread. What is the difference between state and props in React?

It says that props are different from states and ideally props should not be change in its component and only should be changed by its parent component.

However, mapStateToProps function in react-redux maps states in Redux to props of a React components, which is basically changing props of a React component when Redux state is changed by an Redux action.

It does not make sense to me. It seems that it should have been mapStateToStates instead and maps Redux states to states of a React component.

Am I missing something?

Community
  • 1
  • 1
gpminsuk
  • 115
  • 2
  • 5

3 Answers3

12

It says that props are different from states and ideally props should not be change in its component and only should be changed by its parent component.

State here refers to the internal state of the component, which the component can change internally via .setState().

However, mapStateToProps function in react-redux maps states in Redux to props of a React components, which is basically changing props of a React component when Redux state is changed by an Redux action.

The state here refers to the redux store, an external state. react-redux's connect method creates a HOC - higher order component (a component which is aware of the store's state changes). The HOC wraps the dumb react component, which is not aware of the store. Using mapStateToProps the HOC maps the data from the external state, and inject it to the react component via the props.

State in redux store -> mapStateToProps in HOC -> props passed to the dumb component

So the HOC is the parent, and the dumb component is the child. The parent injects new props to the child component, and the 1st assertion "props should not be change in its component and only should be changed by its parent component" is not violated.

Notes:

  1. More info about higher order component can be found in Dan Abramov's article about Presentational and Container Components.

  2. To understand how react-redux connect works - in the online free course, Getting Started with Redux, Dan Abramov shows how to build connect from scratch (lessons 22-29)

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • Thanks for mentioning HOC. Seems like `connect` method creates a HOC which is a wrapper (or a parent component) that changes it's props of a child component (or the component being connected). It makes sense! Am I understanding correctly? – gpminsuk Jan 03 '17 at 07:27
  • Indeed you do :) If you want to dive in a bit - in the online free course, [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux), Dan Abramov builds connect from scratch (lessons 22-29). – Ori Drori Jan 03 '17 at 07:33
0

  1. state here in mapStateToProps means state in ReduxStore.

  2. It maps Redux state to ReactComponent props. It's not necessarily to map props to states, e.g. Pure Component

Qiaosen Huang
  • 1,093
  • 1
  • 10
  • 25
0

mapStateToProps pass state as a props to component using react-redux connect () function. Consider connect() function as wrapper component, which passes props to children.

                    mapStateToProps
connect (state) ----------------------->  component(props)
Khalid Azam
  • 1,615
  • 19
  • 17