React + Redux: what are the advantages of the separate connection of each container via connect?

There is an app in which there are old and new code written by different programmers. I currently accepted a job after and they study their code. One programmer chose "reconnecting" Dispatch and State globally in the "top" app container:

// App/Containers/AppContainer.js
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);

export default AppContainer;

Other prefer to do it locally in each container application, which he docosanol, each time before the container causing the code like this:

// App/Containers/SubContainers/SomeSubContainer.jsx
 state => ({
 app: {
 page: {
 meta: {
 banners: state.banners,
 dispatch => ({
 actions: bindActionCreators(actions, dispatch),

SomeSubContainer class extends Component {

As you can see from the last piece of code, the solution is to make the connection locally in the container is dictated, perhaps, a trivial optimization of old code and get values in this state - in fact, only the values from the application's global state (which we have in the first piece of code preconnecting) and transferred to the props (don't know how more correctly to describe it), changing only the names and sometimes the structure.

And, consequently, this decision may be a temporary one, at the time of moving the entire application to the new structure of the state, props and so on. But maybe there are some other benefits in this manual connect subcontainers? It was the first question.

The second question is: why after the second piece of code setting app, for example, can get into the and setting banners in props.state.banners?
June 8th 19 at 17:09
2 answers
June 8th 19 at 17:11
first question:
if there are changes in store (global state) you will have to repaint all the components that subscribe to these changes and in which there is no explicit prohibition of it through shouldComponentUpdate. That is, if perrished parent, then perricoota and all his descendants. Class? (sarcasm, of course not the class). So the connection in "sub-containers", as you say - productive to repaint just those pieces (parent+children) that were signed on a piece (part) of data from the global store.

the second question is: how it works react-redux library and especially the function of connect, which seems to "paste" your selected data from store props preconnecting component. (used possible properties recact component - context ). Through the react dev tools look and see what you have automatically, the result of the connect function, there is a parent Conneceted(ComponentName) which provides the desired properties (through the context) and that prokalyvayutsya down in the child (already hand-written component you) props.
June 8th 19 at 17:13
to each component should MapIT just what he needs to know and use.
MapIT stor to make much sense, it will be a bloated state react, nothing more. Then why do so?

Find more questions by tags ReactRedux