Как мне структурировать поток данных в моем приложении React + React Router + PouchDB?

Question

В настоящее время я создаю приложение для планирования курса, называемое Serif, которое загружает данные курса в PouchDB при первой загрузке. Пользовательский интерфейс как таковой:

«Current Term» раскрывающийся список и контролирует текущий набор данных, который используется в любой момент времени. Например, если выбрано «2016 осень», пользователь может искать, просматривать, выбирать курсы и создавать календари, используя курсы из каталога осени 2016 года. Когда пользователь переключится на «Spring 2016», теперь они будут использовать набор данных Spring Spring 2016 и т. Д.

Я использую PouchDB для хранения всех клиентов (по крайней мере пока). С учетом сказанного, вот мой текущий компонент структуры (грубо говоря, без компонентов, которые только для разметки):

• засечками (один из моих маршрутов маршрутизатора)
  • Subnav
    • TermSelect (это тот, который вы видите на верхнем правом углу: "Current Term")
  • Поиск
  • Просмотр
  • Календари
    • Выбор календаря материал
    • фактический календарь

Мой вопрос сосредотачивается на потоке данных от PouchDB к компоненту TermSelect (но правильный ответ к этому будет сообщено мое структурирование всех других компонентов).

Способ, которым я его сейчас создал, Serif имеет состояние currentTerm, которое отслеживает текущий термин для приложения. В конструкторе PouchDB запрашивается для первого члена и устанавливает currentTerm для этого значения.

В способе визуализации Serif запрос PouchDB запрашивается для списка терминов в db, и этот список отформатирован в ожидаемом формате, а затем передается в качестве опоры для компонента Subnav, который, в свою очередь, передает его в TermSelect компонент.

Компонент TermSelect использует полученные реквизиты для заполнения раскрывающегося списка и устанавливает его значение по умолчанию для первого в списке, что приводит к появлению «2016 Fall», который вы видите выше. Когда выбрана опция, вызывается функция обратного вызова, передаваемая как часть данных, которая изменила состояние компонента Serif.

Помимо проблемы с значением по умолчанию требуется щелчок для отображения, в основном это работает. Это правильный способ сделать что-то? Вместо передачи данных терминов с Serif на компонент TermSelect компонент TermSelect может запрашивать его непосредственно из PouchDB.

Любые предложения по улучшению или даже просто подтверждение того, что это правильный шаблон потока данных, будут оценены. Я новичок в React, и у меня возникают проблемы с жонглированием всех правильных шаблонов и антипаттернов (не используйте prop для установки состояния, компоненты должны передавать данные от состояния до состояния без сохранения состояния и т. Д.).

Спасибо!

Answer 1

Я не думаю, что в вашей конструкции где-то есть что-то неправильное, где и когда React общается с PouchDB. Ваш опрос естественный, и хороший!

Похоже, вы проблема с управлением государством. Вы управляете им?

Если вы не:

Использование redux. Обычно у меня есть действие, которое отправляется, которое берет любую информацию, которую вы хотите сохранить, и сохраняет ее в PouchDB. Это делает обмен сообщениями в одном месте, и это избавляет от стресса/знаний, которые ваше приложение React должно знать о PouchDB.

Если вы:

Создать действие, которое отвечает за передачу данных в мешочек. Неважно, как это происходит (до точки); это зависит от вас и от дизайна вашего приложения.

Кажется, что вы направляетесь в правильном направлении. Ничто не кажется беспорядочным или явно неправильным.