No so long ago Dan updated his article about Presentational and Container Components
saying that with hooks we don't need connect() and containers no more.
But I can't understand what is the profit making views so tightly coupled to model. Now component should know where and how to get data which make it much less isolated which in my opinion is like very big minus
For example I have a ProgressBar component which had only one prop - width
const ProgressBar = (props) => (
<div style={{ width: `${props.width}%` }} className={styles['progress-bar']}></div>
);
I could use this this component anywhere knowing its contract: it takes one prop width. The component itself is unaware of props comes from and in my opinion it's what makes dummy components great.
In container component I collect data from store and send it to dummy component and I think that makes code very clear.
Without container ProgressBar component should collect data from store by itself:
const ProgressBar = () => {
const width = useSelector(state => state.progress.width);
return (
<div style={{ width: `${width}%` }} className={styles['progress-bar']}></div>
);
}
In this case:
- In order to work View should know the structure of store (Model)
- Looking at component I'm unaware about the contract and should read all the code inside of it to get what it need to work
- I cannot reuse it in another components if I want data to be collected not from the store