React + Redux: what are the benefits of connecting each container separately with connect?

Question

React

There is an application in which there is old and new code written by different programmers. I have currently accepted a job after them and am studying the code they wrote. One programmer preferred to "connect" Dispatch and State globally, in the "top" application container:

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

export default AppContainer;

The other preferred to do it locally in each subcontainer of the application that he created, each time before the container calling something like this:

// App/Containers/SubContainers/SomeSubContainer.jsx
...
@connect(
    state => ({
        app: {
            lang: state.page.blabla.language,
            ...
        },
        page: {
            meta: {
                tags: state.page.metaTags,
                ...
            },
        },
        banners: state.banners,
        ...
    }),
    dispatch => ({
        actions: bindActionCreators(actions, dispatch),
    }),
)

class SomeSubContainer extends Component {
...\

As you can see from the last piece of code, this decision to make a connection locally in the subcontainer was dictated, perhaps, by a banal optimization of the old code and getting the state values ​​​​in it - in fact, the values ​​\u200b\u200bare taken from the global state of the application (which we connected in the first piece of code) and transferred in props (I don’t know how to describe it more correctly), only the names and sometimes the structure change.
And, accordingly, all this decision was probably temporary, at the time of moving the entire application to a new state structure, object props, and so on. But, perhaps, there are some other advantages in such a manual connection of subcontainers? It was the first question.
Second questionis this: why, after the second piece of code, the app parameter, for example, can go to props.app, and the banners parameter to props.state.banners?

Answer 1

first question:
when changes are made in the store (global state), all components that are subscribed to these changes and in which there is no explicit prohibition on this through shouldComponentUpdate will be redrawn. That is, if the parent is redrawn, then all its descendants will be redrawn. Class? (sarcasm, of course not a class). Therefore, connecting in "subcontainers", as you say, is more productive: only those pieces (parent + children) that were subscribed to a piece (part) of data from the global store will be redrawn.
the second question: this is how the react-redux library works and in particular the connect function, which seems to "glue" your sample data from the store into the props of the connected component. (using the capabilities of the reactive components property - context ). Look through the react dev tools and you will see that automatically, as a result of the connect function, the parent Connected(ComponentName) appears in which the necessary properties appear (through the context) and which are thrown down into the child (into the component you have already written manually) props .

Answer 2

Each component needs to map only what it needs to know and use.
It makes no sense to map the store to the app, it will be a bloated react state, nothing more. Then why do it?