React design patterns using redux

Question

I am developing using Presentational & Container design pattern.

Here I have one question.

If all components are connected to the global store, there is no need to divide the components into Presentational components and Container components.

Is there any reason to divide them?

The reason I inquire about this is that if you develop using the Presontational Component & Container Component design pattern, you have to pass props from the parent component to the child component, and I think this is a part that can lower development productivity and cause errors...

So I would like to connect all the components to the global store and use them.

What other problems are there in this case? For example, performance...

Answer 1

"Presentational components" and "Container components" are a pretty old concept that stems from the pre-hooks area. It was nice do have presentational components that could be tested purely on their own - but with the rise of hooks, React components generally house a lot more logic and in most cases, this is fine.

Redux is still a good way of generally moving most logic outside of components - even without a distinction between "presentational" and "container" components. See the Style Guide on this topic

I'd generally recommend reading the Redux Style Guide and if you are still using old-style Redux with connect and switch..case reducers, also read why Redux Toolkit is how to use Redux today

Answer 2

If all components are connected to the global store, there is no need to divide the components into Presentational components and Container components.

First off, any component can be connected to the store (as in, the redux context is available), but you don't need to access state or dispatch actions in every component. So I'd define "connected component" as one that actually uses state or actions.

Is there any reason to divide them?

I'd recommend to simply read state or dispatch actions if and where you need to .

This design pattern from the early redux days is honestly not super helpful and got watered down a bit with hooks and function components (quicker to throw in a useSelector than setting up a connect() ed component).

In some cases you can separate abstract UI logic from global state. As @pailhead pointed out in a comment above, there could be a UserStatus component that defines two different colors for logged in vs. logged out - without being connected to redux. Instead a <UserStatusIndicator> is connected to redux and passes props.isLoggedIn , which is read from state.user.isLoggedIn , to the <UserStatus> component. Imagine the UserStatus component is also reused in an admin panel list that shows the current status of all users in the system - so it's rendered 50 times but independent from redux.

you have to pass props from the parent component to the child component

Definitely don't do excessive prop drilling, connect these children to redux instead.