Flux

АРХИТЕКТУРА ПРИЛОЖЕНИЯ ДЛЯ ПОСТРОЕНИЯ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ

Flux — архитектура, не фреймворк

для реализации требуется всего один небольшой модуль

Flux определяет однонаправленный поток для изменения данных

Похож на подход CQRS

Command Query Responsibility Segregation (разделение ответственности на команды и запросы)

Flux vs. MVC

  1. MVC на земле JavaScript является MV* 
  2. Flux не проще MVC
  3. Flux предсказуемей MVC

MV*

большой MV*

Views

Flux не привязан к React.js

Опыт совмещения с Angular.js

Actions

  • представляют все действия которые пользователь может сделать в приложении
  • это простые JS-объекты с "type" свойством
  • значения "type" являются константами
{
  type: ActionTypes.FOLLOW_ZINE,
  zineSlug: 'lightbox-magazine'
}

{
  type: 'LIKE_STAMP',
  stampId: 1024
}

{
  type: 'SHARE_STAMP',
  stampId: 1024,
  service: 'facebook'
}

Action creators

Формируют action,
отправляют его в диспетчер

Dispatcher

pub-sub, но подписчики получают все сообщения

Stores

  • Модель данных / Состояние приложения
  • Логика
  • Любая структура

Flux + React

  1. Корневой компонент отслеживает изменение хранилищ
  2. При изменении любого из сторов вызывается forceUpdate
  3. Компоненты получают данные напрямую из хранилищ (не нужно прокидывать данные по дереву)
  4. Компоненты взаимодействуют с внешним миром через хранилища (получение данных) и действия (отправка данных)

Flux + React + Node.js

  • Поддержка браузеров без JavaScript
  • Улучшение времени первой загрузки
  • Поисковые роботы / SEO

Flux

By Philipp Nehaev