React / Redux deep props dependecy

Question

I have a question about how to structure a React/Redux app.

As far as I understand, it's not recommended practice to reference containers inside a component. However when nesting components withing a Redux app, the top level container is bound with a connect() and mapStateToProps etc, but it seems strange to pass in all props down the line to -only- components.

When structuring an app with a nested component for example like:

Dialog > Form > Tab > Input Section > Input control

the input control could have a prop isVisible, where it seems strange to me that I would have to pass the prop all the way down the tree.

So my question is mainly, is this indeed what is recommended and how is this handled? Is this for example simplified by setting props to something like:

{
  inputProps: { visible: false }
}

?

Or, can I reference a container inside my component, so I can have a separate connect() for only the props actually relevant?

Take a look at this: stackoverflow.com/questions/34425741/… , also this: github.com/reactjs/redux/issues/419 , it was said that it is even better to nest connected components down to the tree. — Shota

markerikson markerikson · Accepted Answer · 2017-01-23T22:07:40

One of the main points of Redux is to allow individual components to connect to the store and extract the data they need. Also, don't overthink the whole "container/component" distinction in terms of separating things in the codebase.

See the Redux FAQ entry at https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree for more info on connecting multiple components, and Dan Abramov's tweet at https://twitter.com/dan_abramov/status/802569801906475008 for thoughts on "container vs presentational" structuring.

React / Redux deep props dependecy

2 Answers