Могу ли я использовать HOC "connect-redux" "connect" для предоставления пользовательских селекторов "родовым" компонентам React через mapStateToProps?

Question

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

Лучшее место для меня, чтобы подключиться к хранилищу Redux - это на верхнем уровне и передать реквизиты компонентам sub и sub-sub (я знаю, что это несколько противоречит цели Redux, но в остальном все становится слишком сложным).

Моя проблема заключалась в том, чтобы предоставить разные селекторы для каждого из "экземпляров" этого общего компонента верхнего уровня, чтобы они могли получать разные данные. Решение, которое я придумал, заключалось в том, чтобы обернуть каждый "экземпляр" в другой компонент, который в действительности состоял бы только из обертки "универсального" компонента в функции "подключения" HOC и передачи пользовательских селекторов через mapStateToProps,

То есть, я бы имел "общий компонент

// GenericPanelComponent.js
class GenericPanelComponent extends React.Component {
...
// component code
}
export default GenericPanelComponent

тогда каждый "экземпляр" будет предоставлять отличные данные через "соединение"

// SpecificInstance1.js 
import { connect } from 'react-redux';
import GenericPanelComponent from './GenericPanelComponent';


class SpecificInstance1 extends React.component {
// no code
}
const mapStateToProps = (state) => ({ specificInstanceData: specificInstance1Selector(state) });
export default connect(mapStateToProps)(GenericPanelComponent);

а также

 // SpecificInstance2.js 
    import { connect } from 'react-redux';
    import GenericPanelComponent from './GenericPanelComponent';

 // SpecificInstance2.js 
    class SpecificInstance2 extends React.component {
    // no code
    }
    const mapStateToProps = (state) => ({ specificInstanceData: specificInstance2Selector(state) });
    export default connect(mapStateToProps)(GenericPanelComponent);

Есть ли что-то концептуально или архитектурно не так с этим подходом? Если да, то как подавать пользовательские селекторы Redux и данные в повторно используемые компоненты React? Спасибо за любые идеи!

Answer 1

В этом подходе нет ничего плохого, HOC, например, connect, разработан таким образом, чтобы иметь такую ​​выгоду.

Чтобы использовать это эффективно, вы должны решить, какие реквизиты понадобятся вашему GenericPanelComponent, и предоставить их с помощью функции подключения. Единственное, что я хотел бы отметить в вашей текущей реализации, это то, что GenericPanelComponent не должен знать, какой это тип Panel, поэтому у него не должно быть разных реквизитов, как вы это сделали.

const mapStateToProps = (state) => ({ specificInstance1Data: specificInstance1Selector(state) });
const mapStateToProps = (state) => ({ specificInstance2Data: specificInstance2Selector(state) });

И вместо этого данные должны прийти на одной опоре

const mapStateToProps = (state) => ({ specificInstanceData: specificInstance1Selector(state) });
const mapStateToProps = (state) => ({ specificInstanceData: specificInstance2Selector(state) });