React Redux. Which way is more correct: calling connect on the main file or on different ones that need to forward the data?

Question

React

Entry point file App.
There are two ways:
1) call connect on the App, and then forward the necessary data from it through props or context.
2) Call connect only on files that need data from the application store. But then how to get store? Don't use multiple . <Provider></Provider>

Answer 1

In fact, both options are correct. If we consider this in terms of ease of use, then the second option definitely wins. One large component will be divided into several small ones, those into several more, and those into more. And it will be problematic for you to transfer each time to the store parameters.
Provider is called once on the root component. Further, you simply connect any of the components to the redux store:

import React, {Component} from "react";

import {connect} from "react-redux";
import {bindActionCreators} from "redux";

/* ваш компонент */

class MyComponent extends Component {
  render() {
    console.log(this.props);

    return (<div></div>);
  }
}

const mapStateToProps = (state) => {
  return {
    state
  }
};

const mapDispatchesToProps = (dispatch) => {
  return {
    dispatch,
    // это мы подключаем собственные actions
    actions: bindActionCreators(actions, dispatch),
  }
};

export default connect(mapStateToProps, mapDispatchesToProps)(MyComponent);