Как быть с получением данных в компоненте?

Question

[Дмитрий]

Пишу проект на Reac + Flux. У меня есть панель с курсом валют для всего приложения, есть выбор валюты при добавлении нового проекта и есть просчет цены проекта в зависимости от курса валют.
Итого компоненты:

<App>
  <CurrencyPanel />
  <ProjectsList>
    <Project />
  </ProjectsList>
</App>

Очень не хочется передавать курс валют из стора в App а потом спускать через props по всем компонентам, многим это просто не нужно. Как было бы правильно получать это в "нижних" компонентах? Обращаться напрямую в store и получать только курс валют оттуда или подписаться на новое событие типа CURRENCY_CHANGE и вытягивать новые курсы при componentWillMount без всего остального стейта или вообще создать отдельный store?

Comments

[copal]

на самом деле все просто, есть всего-лишь два варианта. 1) Вы делаете так и только так, как написано на офф сайте. Не волнует нравится Вам это или нет. 2) Делаете так как считаете нужным, но при этом подписываетесь под тем, что Вас будут называть неадекватным и не будут хотеть с Вами работать. И не ипет правы Вы или нет, не упаси господь чтобы Вы, простой смертный сказали вслух что реакт это полный трешь. Стадо сразу начнет мычать говоря что где цукерберг, а где Вы.

[copal]

я сейчас тоже с ним работаю и делаю не то что делают остальные. И мое мнение что он не предназначен для динамических данных. Это просто нужно быть сбитым поездом чтобы сказать - сначала мы прокидываем все через App, ведь у нас обычные приложения и не страшно что это не совсем положительно сказывается на производительность. А после как прокинули давайте нанем оптимизировать в методе shouldComponentUpdate.
По другому - сломайте себе ногу, а на следующем шаге давайте её лечить.

[Дмитрий]

copal: ну, то что все данные прям одним скопом прокидываются во всем компоненты - я сомневаюсь. Как минимум, есть понятие умных и глупых компонентов, таким образом УЖЕ можно разбить весь App на несколько под-App-ов ;) Просто каждый из умных компонентов будет подписываться на нужное ему событие в Store и дергать только нужный ему кусок данных. Например, форме регистрации вообще как бы не нужно знать ничего из данных по проектам, а списку пользователей не нужно знать курс валют на сайте.

[copal]

Дмитрий: да, только это не flux. Flux, это неупорядоченная очередь в кассы, в которой кассир принимает строго в известном только ему порядке. Но он не кричит - Иванов, Смирнов, Сидоров, он кричит следующий. И все толпа должна подбежать и назвать свою фамилию чтобы кассир сказал тот ли чел ему нужен или нет. То есть сторы не шлют определенных событий, а шлют одно - change. Если это Вам кажется излишним на каждый change перестраивать все приложение, то Вы можете оптимизировать усложнив все ненужной логикой в shouldComponentUpdate.
Если Вам и это не нравится, то Вы убогий и не адекватный.

[Дмитрий]

copal: Да, только суть в том, что сторов может быть несколько в отличии от диспатчера, так что компонент может быть подпиан на нужный ему стор и событие change конкретно этого стора. Ведь так?)

[copal]

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

[Дмитрий]

copal: ну вызывайте в utils'ах событие типа changeOneComponent, перехватывайте его только одним стором и обновляйте только один компонент ;) Если вы конечно не хотите для стора дописывать второй тип события, который он может эмитить, но, может, вернемся к моему изначальному вопросу?))

[copal]

Дмитрий:

Ведь так?)

да, так.

[copal]

Дмитрий: если возвращаться к Вашему вопросу, то я бы новый стор создал. Лично мне больше нравится когда сторов много.

[Дмитрий]

copal: ну вот пока это единственное здравое решение, но решил все-таки послушать людей поумнее меня.

Answer 1

[Aves]

https://facebook.github.io/react/docs/context.html

Comments

[Дмитрий]

Думал об этом, но он позволяет передать контекст только от owner'a, но не от родителя. Если я создаю компонент Project, который хочет получить некие данные внутри компонента PorjectsList а данные у меня находятся в компоненте App, который создает ProjectsList - данные мне не упадут.

[Дмитрий]

Возможно я не прав. Почитал оф.доку - вроде возможно передавать контент не только от владельца, но и от простого родителя, одним словом, я где-то взял не правильную ифномарцию

[Aves]

Дмитрий: Такая проблема вроде была, и решалась кажется тем, что родителя делали владельцем например с помощью cloneElement. Сейчас работает без ухищрений - jsbin

[Aves]

или получение из просто коневого элемента, который ни родителем, ни владельцем не является - jsbin