Where should I connect connect(mapStateToProps, mapDispatchToProps)(App) for each component?

Question

React

Hello.
The structure of Redux is not fully understood.
Let's say I have an App and a routing that renders depending on the component's URL:

1. Component-1
   
2. Component-2
   

Do we need to define mapStateToProps and mapDispatchToProps at once in the root App component
connect(mapStateToProps, mapDispatchToProps)(App)
or is it possible for each component within itself?
connect(mapStateToProps, mapDispatchToProps)(Compoment-1)
connect(mapStateToProps, mapDispatchToProps)(Compoment-2)

Answer 1

connect is needed to subscribe the component to reducer events and give access to reducer data. And routing is generally aside from redux (although, of course, there are routers that work through redux).
I usually stick with the following: I apply connect to the top-level container components that the router manages (in your case it is Component-1, Component-2). In all other simple (dumb) components located in the container, the data is received in parameters (via props) from the container.
If nested components need to somehow interact with redux: for this, functions are defined in the container component that reducers and dispatch see. Further, these functions are given to dumb-components through props and they can call them on some kind of their own event.
Theoretically, you can connect to any component, but firstly it is more expensive in terms of resources and secondly it kills encapsulation. The charm of the so-called. "stupid" components is that they are simple and depend only on explicit parameters (props) and therefore are easily portable. By adding connect to them, we nail them to the data model of a particular application.