Использование коллекций данных в хранилище с реактивом и потоком

Question

У меня есть приложение React + Flux, которое использует несколько вкладок данных. На каждой вкладке отображаются те же данные (например, счет-фактура), но с другого объекта. Основываясь на других сообщениях, которые я прочитал по этому вопросу, я решил создать коллекцию в «InvoiceStore», которая содержит объект «Invoice» для каждой закладки, на которой отображается счет-фактура.

На каждой вкладке (в деталях счета-фактуры) есть несколько компонентов, связанных с виджетами. Эти компоненты вложены в несколько слоев.

Задача состоит в том, что каждый компонент должен знать, для какого объекта счета должны отображаться данные. Я знаю, что могу организовать это, передав данные (фактические данные или «ключ» элемента в коллекции счетов-фактур) из верхнего компонента счета-фактуры (вкладки) каждому из его потомков, но это будет означать, что компоненты в средний должен будет передать полученные свойства своим детям. Мне это кажется излишним.

Возможно ли иметь какую-либо переменную, которая имеет область действия одного компонента и его потомков? Или существует другое «стандартизированное» решение этой проблемы?

Предложения действительно оценены!

Answer 1

Вы можете пройти через реквизиты с JSX spread attributes: {...this.props}, которые основаны на ES7 spread operator proposal.

Это разрушает все реквизиты, которые вы получили в родительском доме, и передает их ребенку. Иногда вы не хотите передавать все реквизиты, а затем вам нужно выровнять (или добавить) реквизит, который вы хотите передать явно. Для этого может быть полезно использовать новый destructuring syntax, доступный в ES6.

Пример:

<MyChildComponent 
    foo={bar} 
    baz={qux} 
    {...this.props} 
/> 

Существует также без документов, Hacky технологии с использованием this.context, но это API, нестабильна и может измениться. Оператор распространения в настоящее время является техникой, рекомендованной командой React.

Answer 2

В Реактике нет концепции «объема», так как метод React предпочитает шаблон дизайна композиции. Детский компонент должен быть максимально полным, что не должно знать ничего о родительском компоненте, кроме необходимых реквизитов. Таким образом, объект требуется для каждого дочернего компонента.

Альтернативой является предоставление открытого метода getItem (itemId) в InvoiceStore. Но все же нужно было бы передать счет-фактуру реквизитом.