Menu
I am building an React+Redux application, I come to the point where I am considering to use a container inside another container. I am asking myself if this is a good approach, ie. is it good practice, or should we strictly follow the rule of 1 container with several components ?
704
Containers are the primary components and the entry point from which we call child or generic components. Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store.
There are three core components in Redux — actions, store, and reducers. Let's briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it's to be used. We'll be implementing a similar example to the login component above but this time in Redux.
Container components can be primarily referred to as the parent elements of other components in a React app. They serve as a bridge between the normal components that render the UI and the logic that makes the UI components interactive and dynamic. The most common function of a container component is to obtain data.
What is the difference between component and container in React Redux? Component is a class or function component that describes the presentational part of your application. Container is an informal term for a component that is connected to a Redux store.
Let me quote Dan Abramov's article about presentational- and container- components:
When you notice that some components don’t use the props they receive but merely forward them down and you have to rewire all those intermediate components any time the children need more data, it’s a good time to introduce some container components. This way you can get the data and the behavior props to the leaf components without burdening the unrelated components in the middle of the tree.
...meaning it is perfectly fine to have a container component inside another container component if you feel the need for it.
125
It's not easy to find which component should stay "dumb" and which component should be aware of application and become a container. I don't think it's a problem / anti-pattern to use a container in another one. If a part of your application is used on different pages it can be a container, be connected and use in differents pages/containers, Just be aware : this "container component" will specific to this application
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
