Menu
In the getting started video of Redux we see that the Footer (a dumb component) uses Filterlink (a container).
But when I read this article, it seems, but not very clearly, that only containers should use/render containers.
For me, if Footer uses Filterlink (which is tied to Redux) I can't reuse it on other projects which don't use Redux. But maybe it is an exception? Maybe hard coding dumb component for use only on one project is ok?
Am I missing something?
964
What is a correct usage of smart/dumb component pattern? IMO the correct usage is generally to limit the scope of state and logic as much as possible, only exposing out state and mutators on the API when necessary (i.e. lifting state up). There is also the consideration of separations of concerns.
Rarely include state: The only instance where a dumb component has state is for manipulating the UI itself, not application data. Some examples of where a dumb component might have state would be button groups, tabs, switches and other UI elements that do not impact the data, only the UI.
What Makes a Component Smart or Dumb? Smart components are app level components that perform functions and manage data while dumb components focus solely on the UI.
Container components shouldn't have the view logic or presentational logic. The job of container components is to compute the values and pass them as props to the presentational components. Hence, these components are sometimes also referred to as Smart Components.
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.
In a Redux-powered app, a presentational component does not interact with the Redux store. The presentational component accepts props from a container component. The container component specifies the data a presentational component should render.
Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store. For example, we might have a container called BlogList connected to Redux, and the source code may look like this. BlogList.js
Every React component interacts directly with the Redux store. App subscribes to the store and uses getState () to read the state and passes down this state as props to its children. Child components dispatch actions directly to the store. In this chapter, we'll explore a new paradigm for organizing our React components.
The article was somewhat out of date with how I think about it today. I just updated it so you can read it again with the fresh perspective. I’ve come to the opinion that it’s totally fine to use container components inside presentational components. The reason for this is simple: you want to be able to turn a presentational component into a container component at any time it needs too much information, and it would be a bummer if you had to convert all call sites when you do that. Therefore whether a component is presentational or a container is its implementation detail, and any components, whether presentational or containers, can use it just fine.
62
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
