How to access the Redux store from deeply nested components
I am new to Redux and my nested component structure is shown below. I have a Redux container that owns the state and renders component A. Component A renders component B and component B that 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 their state. How can i do this? I don't want to change every dumb component into containers. Any help would be greatly appreciated. Thank!
source to share
Feel free to use connect()
for any of your components that you think you need to directly access data from the Redux store, or to submit actions to Redux. It's also okay if you have fewer connected components and pass data and action creators to children as props, but one of the main reasons for this connect
is that you can use it to wrap any component in your application that needs to interact with Redux.
Also, don't over-think about the container / presentation concept. Dan Abramov said that people are spending too much time worrying about this , and I have a chat log where I discuss realistic methods of using connect
and defining "containers" .
For more information see:
source to share