Как загрузить вложенные компоненты из одного вызова xhr в потоке.

Мне нужно динамически отображать компоненты jsx следующим образом:

<document>
    <page>
        <frame>
            <image>
            </image>
        </frame>
     </page>
</document>

из данных типа:

{
"document": {

   "other properties" : ...
   "page": {

      "other properties" : ...
      "frame": {

         "other properties" : ...
         "image": {}
      }
    }
  }
}

Который (весь документ) исходит из единого вызова службы, теперь каждый мой компонент, такой как документ, фрейм, страница, изображение, имеет соответствующие хранилища, такие как хранилище документов, хранилище страниц и т. д. Когда я получаю данные из API, я вызываю действие для обновления хранилища документов, но не могу понять как обновить другие вложенные хранилища компонентов.

Если я использую реквизиты для отправки данных во вложенный дочерний компонент, я думаю, что нарушаю

источник правды

и именно поэтому вы хотите обновить хранилище данными, а затем использовать хранилище для установки состояния моего компонента.

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


person Usman Aziz    schedule 04.03.2016    source источник
comment
Обычно, если я работаю с предварительной загрузкой данных, то есть я получаю данные один раз при загрузке и никогда больше, я выполняю эту загрузку данных, затем заполняю свое хранилище, а затем визуализирую свои компоненты. Теперь, если я делаю несколько вызовов данных в зависимости от пользовательской итерации, я буду использовать источники, и мое хранилище будет содержать мое состояние, которое используют компоненты. Затем используйте действия для изменения хранилища, и мои компоненты будут обновляться при изменении значений хранилища.   -  person Jack    schedule 04.03.2016
comment
Вы предлагаете, чтобы после ответа apiutils я заполнил все магазины в одном месте?   -  person Usman Aziz    schedule 04.03.2016
comment
Я не уверен, какие именно инструменты вы используете. Вам решать, работает ли предварительная загрузка для того объема данных, который у вас есть, или вы хотите загружать данные только тогда, когда это абсолютно необходимо. У меня есть инструмент прямо сейчас, который я создаю, который загружает 2 файла json заранее, которые вместе составляют 150 КБ. Было проще и понятнее с точки зрения кода загружать их сразу. Если подумать, это, вероятно, меньше килобайт, чем большинство изображений на вашей странице. Однако, если вы постоянно звоните в серверную часть, это решение не сработает.   -  person Jack    schedule 05.03.2016
comment
Все магазины прослушивают все события, поэтому вы можете использовать одно и то же событие из своего действия для запуска нескольких обновлений магазина. Это будет сделано с одной отправкой, поэтому вы не получите ошибок.   -  person Teo Dragovic    schedule 05.03.2016


Ответы (1)


Но если я попытаюсь обновить хранилище страниц с помощью действия в хранилище документов, а затем обновить хранилище фреймов из хранилища страниц, реакция даст мне ошибку «невозможно отправить в середине отправки».

Вы действительно упускаете ключевой момент.

Цель потока состоит в том, чтобы иметь однонаправленный поток данных. Каждая часть потока потока должна получать информацию только из одного другого места.

Таким образом, ваши магазины должны только получать информацию от Dispatcher и должны только отправлять данные компонентам. Вы пытаетесь либо перекрестно поговорить о своих магазинах, либо заставить ваши магазины отправлять информацию диспетчеру. Ни то, ни другое не принимается.

Вместо этого просто пусть и ваш Page Store, и ваш Frame Store прослушивают одну и ту же отправку, и каждый отвечает по-своему, если вы хотите, чтобы они оба использовали эти данные.

Тем не менее, я бы не решил эту проблему таким образом.

Если я использую реквизиты для отправки данных во вложенный дочерний компонент, я думаю, что нарушаю источник правды

Неа!

В идеальном потоке только один компонент должен взаимодействовать с накопителями. Этот компонент называется «контейнером» и является родителем верхнего уровня для всего вашего приложения. Затем он становится источником правды для всех своих дочерних элементов, передавая им информацию через реквизит.

здесь приведено их описание из документации Flux.

person Jake Haller-Roby    schedule 08.03.2016
comment
Спасибо, я понимаю вашу первую часть ответа. Но для второй части. Если контейнер, как в этом случае, контейнер документа передает все данные в качестве реквизита на страницу, затем в кадр, а затем в изображение. И после этого значение хранилища изображений изменяется. Только компонент контейнера документов должен прослушивать изменение хранилища изображений? или я могу позволить дочернему компоненту иметь собственные компоненты-контейнеры, которые прослушивают соответствующие хранилища и обновляют содержащееся там представление с реквизитами. - person Usman Aziz; 10.03.2016
comment
В идеале да, к магазинам должны подключаться только контейнеры. Вы можете использовать несколько контейнеров, но имейте в виду, что философия дизайна контейнеров гласит, что они не должны получать какие-либо реквизиты от своих родителей. Так что используйте контейнеры только в местах соединения, где подкомпоненты логически отличны от своего родителя. - person Jake Haller-Roby; 10.03.2016