Передача данных в хранилище Redux как Props из parent1 -> parent2 -> child (OR) вызывает избыточное хранилище напрямую в дочернем компоненте с mapToStateProps?

Question

Передает ли Redux хранение данных из родительских компонентов (где они уже используются для некоторых других функций) в качестве дочерних компонентов в качестве реквизита лучше, чем прямой вызов хранилища Redux в дочерних компонентах?

Я пробовал как передавать реквизиты, так и вызывать напрямую в дочернем компоненте.Не могу найти большой разницы в функциональности, просто интересно, что такое стандартная практика и как это влияет на производительность для больших данных.

ExampleReduxdata: {'Apple', 'Banana', 'Mango', 'Orange'}

    class ParentComponent1 extends React.Component {

    render(){
     return (<ParentComponent2 reducerData={this.props.reducerData} />
    }

    const mapStateToProps = {

    reducerData: state.ExampleReduxdata,
     }
    }
    class ParentComponent2 extends React.Component{
    render(){
     return (<ChildComponent reducerData={this.props.reducerData} />
     }

    }
    (OR)


    class ChildComponent extends React.Component{

    render(){
     return (
        <div>{this.props.reducerData}</div>
       );
    }

    const mapStateToProps = {

    reducerData: state.ExampleReduxdata,
    } 

    }

Answer 1

Основано на основной документации Redux:

Реактивные привязки для Redux отделяют компоненты представления от компонентов контейнера.Такой подход может облегчить понимание вашего приложения и упростить повторное использование компонентов.

Так что я полагаю, что для обеспечения повторного использования ваших компонентов и следования принципу Единого источника истины, лучше обернуть ваш компонент методом connect!

Другим простым способом избежать использования этих методов и упаковок в функциональных компонентах являются избыточные хуки useSelector и useDispatch.