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!

Hey WilomGfx, is it possible for Component C send the Redux container a value to update to the store? I believe the Redux container and Component C can't talk to each other as Component C is rendered by Component B. — Raja
Its doable, but you may want to to rethink your structure, your dumb components should just be provided with everything they need to modify state. They should only care for rendering and binding events to actions(which should come from the ''smart component'' or the container in your case. — WilomGfx
It depends, but probably. I'd have see it in order to help you more than that, but yeah. No problem btw :)! — WilomGfx
No problem. I'll post my answer and you can accept if that's okay with you ? That way we get a closed question — WilomGfx

markerikson markerikson · Accepted Answer · 2017-07-23T22:46:57

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

How to access the Redux store from deeply nested components

1 Answers