Best practice when passing Redux state to components

Question

I am working on a React + Redux project with several other developers, and we cannot agree on what is best for where to go in state and actions.

My approach is to have a component “container” or “provider”, which is the parent component, all the necessary states and actions are mapped and passed to the child components, creating a single source of truth. However, on the other hand, you must remember to pass actions and values ​​for each child component, which can be difficult to accomplish.

Another approach to developers is to use mapStateToPropsfor each component, where necessary, anywhere in the stack. Therefore, if a certain state is required for a child component three or four levels down, it will use mapStateToProps for that component. He also imported action creators directly using the keyword import, instead of calling them props. I do not like this approach because you potentially insert states several times and you cannot quickly turn off your state or actions in one place.

I see that both approaches have their advantages and disadvantages, so I just wondered if there is a certain best practice regarding where and when to inject state / actions into the React component stack.

Answer 1

I was working on a relatively large Redux codebase, and the approach we chose and which I like was your second approach, using mapStateToPropsin containers which sends actions and delegates rendering to mute components.

You want to be able to reuse them in many places without moving from state. Your upper state of reduction is still a source of truth, but it mapStateToPropswill allow you to access only that part of the state that you need in this container.

Redux , , mapStateToProps http://redux.js.org/docs/basics/UsageWithReact.html

Answer 2

, Redux, , , . . Redux FAQ , Redux, 6: , .