Как передавать данные в дереве компонентов React / Vue приложения?

Question

[Сергей Соколов]

Приложение описывает многоуровневую структуру, несколько уровней дерева компнентов. Данные хранятся-загружаются в виде похожего дерева.

Причем хранятся и известны при инициаизации приложения только id объектов, а полные данные для отображения асинхронно запрашиваются из стороннего API. Т.е. при открытии какого-то объекта сначала видны только id дочерних, а через пол-секунды подгружаются аватарки-названия.

Вижу два варианта передачи данных внутри:

1. сверху-вниз через props передавать полные комплекты данных, хранить-обновлять их наверху
   
2. либо передавать вниз только id, а каждый из низших компонентов сам запросит-получит полные даные.
   

Вопрос 1. Как лучше поступить с передачей данных для отображения: все через props сверху-вниз или независимость под-компонентов, каждый сам заправшивает-получает-отображает доп. данные?

Дерево редактируется в процессе работы. На каком-то из уровней добавляется элемент. Можно передавать "наверх" пользовательский ввод, и там единый компонент обновит нужный узел в дереве данных; или в самом листочке-компоненте обработать ввод, запросить API, обновить переданный ему через props кусок общих данных?
Вопрос 2. Как лучше поступить при обновлении: передавать "наверх" или опять же самостоятельно внутри копонента вариться? (вопрос 2 мало отличается от вопроса 1 : )

Comments

[Антон Швец]

Зависит от вложенности и манипуляции с данными. В не слишком глубокие рид-онли вьюхи можно передавать полный комплект, для всего остального есть Vuex/Redux

[Сергей Соколов]

Антон, как я понял Vuex/Redux, это лишь паттерн однонаправленного потока данных в приложении. Не менять что-то напрямую, а вызывать метод мутатор. Он не вполне решает проблему передачи данных по дереву компонентов. Или я не так понял.

[Роман Александрович]

Не скажу за Vue но в Reacte лучше использовать Redux и из него тащить данные. Вам не придется прокидывать данные через 500 компонентов по дереву вниз

[Антон Швец]

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

Как раз именно передача данных между компонентами и есть основное предназначение.

В случае с Vuex можно считать что это такой специфичный data-only компонент, доступный по всему дереву Vue с методами работы с данными. Реактивность в комплекте.
Начет redux не знаю, не работал.

Answer 1

[markmariner]

Лучше запрашивать в одном месте наверху и передавать вниз. Контроль за выполнением станет очевидным, при росте приложения переход на Vuex станет безболезненным.

Comments

[Сергей Соколов]

Vuex как-то помогает с деревом компонентов? Пишут только про единый store (у меня так и есть, но добавляются динамически загружаемые данные); синхронные мутации, асинхронные actions. Более ничего.

[markmariner]

Сергей Соколов, нет, никак не помогает, кроме одного: когда вам нужно обновить какие-то данные, отображаемые в разных компонентах, которые не связаны друг с другом иерархически.