Как реализовать контроллер навигации/контроллер панели вкладок в React/Flux?

Question

Я создаю мобильное приложение SPA, используя React. Мне интересно, как я создаю контроллер навигации или контроллер панели вкладок, используя способ Flux. В основном мне интересно, как я обрабатываю права собственности на детей и кто/что обрабатывает фактические переходы.

Прямо сейчас у меня есть компонент navigationController, который имеет метод push для добавления страниц в стек и перехода их в наш выход. Все это сохраняется в состоянии, и родительский компонент ничего не знает об этом.

Для моего контроллера панели вкладок родительский компонент проходит в некоторых элементах tabBar с дочерними элементами элемента tabBar, являющимся содержимым, отображаемым при активной вкладке. Контроллер панели вкладок обрабатывает, когда активна вкладка и какой контент отображается на активной вкладке. Родитель ничего не знает о том, какая вкладка активна. активная вкладка сохраняется в состоянии контроллера панели вкладок.

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

Я думаю, моя проблема может заключаться в том, что я не совсем понимаю Flux.

Любая помощь была бы принята с благодарностью.

Answer 1

Похоже, что вы слишком много делаете в компонентах. Существует много способов реализовать архитектуру Flux, но часто проще всего продумать, что вы почти никогда не используете состояние, только реквизиты. Вся логика о том, какие вкладки доступны и что активно, войдет в TabStore вне компонентов React. Основной поток поток может выглядеть следующим образом:

• TabStore сохраняет внутренний список вкладок и содержимого, а также отслеживает activeTab. Он предоставляет метод, например .getTabs(), чтобы разрешить виду доступ к текущему состоянию. Он также предоставляет методы EventEmitter, позволяющие публиковать изменения.

• Корневой компонент в приложении устанавливает прослушиватель изменений в хранилище вкладок. Самый простой вариант это что-то вроде:

  _onChangeTabStore: function() { 
      this.setState({ 
       tabs: TabStore.getTabs(), 
       activeTab: TabStore.getActiveTab() 
      }); 
  }, 
  

• корневой компонент затем передает tabs и activeTab к вашему TabBar компонента в качестве реквизита. Он может также передать обработчик как:

  onTabClick: function(clickedTab) { 
      TabActions.setActiveTab(clickedTab); 
  }, 
  

• TabActions.setActiveTab собирается направить действие через AppDispatcher. См. the Flux docs для более подробной информации.

• TabStore обрабатывает действие setActiveTab и обновляет его внутреннее состояние. Если активная вкладка изменилась, она выдает событие изменения.

• Корневой компонент получает событие изменения, обновляет состояние и передает новые реквизиты на TabBar.

Нигде здесь никакой компонент React не отслеживает его собственное состояние - это задача магазина. Это обеспечивает действительно чистое разделение между бизнес-логикой и представлением. Он также избегает любого вопроса «как родитель знать, какая вкладка выбрана», потому что родитель получает также состояние табуляции.