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

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

0 голосов
/ 06 февраля 2019

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

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

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

То есть, у меня будет «общий компонент» 

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

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

// 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?Спасибо за любые идеи!

1 Ответ

0 голосов
/ 06 февраля 2019

В этом подходе нет ничего плохого, 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) });
...