How to access the Redux store from deeply nested components

Question

I'm new to Redux and my nested component structure is shown below. I have a Redux container which owns the state and renders Component A. Component A renders Component B and Component B renders Component C.

- Redux Container
  - Dumb Component A          <-- Child of Redux Container
    - Dumb Component B        <-- Child of Component A
      -  Dumb Component C     <-- Child of Component B

Components A, B and C need to access the Redux store to update the state. How can I go about doing this? I don't want to change each dumb component into containers. Any help would be greatly appreciated. Thanks!

Answer 1

You should feel free to use connect() around any of your components that you feel need to directly access data from the Redux store, or dispatch actions to Redux. It's also okay if you have fewer connected components, and pass data and action creators down to children as props, but one of the main reasons for connect is that you can use it to wrap up any component in your application that needs to interact with Redux.

Also, don't over-think the "container/presentational" concept too much. Dan Abramov has said that people spend too much time worrying about it, and I have a chat log where I discuss realistic practices for using connect and defining "containers".

For more info, see:

• The Redux FAQ entry on connecting multiple components
• The Redux Architecture and Redux Performance sections of my React/Redux links list
• My blog post Practical Redux, Part 6: Connected Lists, Forms, and Performance