Please enable JavaScript.
Coggle requires JavaScript to display documents.
Smart and dumb components (Smart components (Charateristics (Describe how…
Smart and dumb components
Smart components
It mean
container
or
app-level*
Charateristics
Describe how things works
Provide no DOM markup or styles
Provide application data, do data fetching
Call
Flux
actions
Named Container by convention
Dumb components
It means
presentation
or
ui only
Charateristics
Describe how things look
Have no app dependencies
Receive onlys props, providing data and callbacks
Rarely have own state, when they do, It's just UI state
Named anything that's a UI noun
Where to split smart and dumb components
Deep split
Smart component
Dumb component
dumb component
Broad split
(There is one smart component
that has many Dumb components children
Smart component
Dumb component
Dumb component
Dumb component
If we have a split we like, now we have to decide what props to send from the parent to the child components
Send them all
<DUmb {... this.props} />
We could just send all the parent's props to the child.
We would do this when the parent feel just like a wrapper
It's passthrough
It's higher-order component
Pass the reducer/selector
<Dumb reducerName={this.props.reducer />
We can pass the whole nested reducer state
Pass new variables
<Dumb newVar={this.props.var}
The values are usually primitive, but they can send down entire new object structures as well