These ideas are not just for React, but for simplicity, I will be using React to demonstrate.
I am not going to go over what Smart/Dumb components are, Dan Abramov already did a great job here.
These are awesome ideas! And I would like to expand upon it.
Before I start, let me be clear. This pattern I will be explaining is NOT for every little component.
Without future ado…
Introduce another level of complexity 😄!
Yes, it sounds ridiculous, but here is the reason: Data which is easy to store and update is not always structured in an efficient manner to pass down through components or for the components to use and reduce that data.
My proposition is to use a View Container in between the Data Store and the Presenter.
By splitting up the way we manage the data and the way we manage the view state we can use better data structures to store, update, and obtain the necessary data to present.
Here are some examples of the same application, but handling data, reducing, and rendering differently.
First is our monolith. Do everything in one component.
Second is using the plain Container/Presenter pattern.
Third example shows Data Store/View Container/Presenter pattern.
The state and action handler in the last example can be extracted out as a Redux Store/Reducer, which would clean up this example even more.
I hope my explanation showed how we can improve the separation of concerns and logic in our applications.