Flux
АРХИТЕКТУРА ПРИЛОЖЕНИЯ ДЛЯ ПОСТРОЕНИЯ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ
Flux — архитектура, не фреймворк
для реализации требуется всего один небольшой модуль
Flux определяет однонаправленный поток для изменения данных
Похож на подход CQRS
Command Query Responsibility Segregation (разделение ответственности на команды и запросы)
Flux vs. MVC
- MVC на земле JavaScript является MV*
- Flux не проще MVC
- Flux предсказуемей MVC
MV*
большой MV*
Views
Flux не привязан к React.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
- Корневой компонент отслеживает изменение хранилищ
- При изменении любого из сторов вызывается forceUpdate
- Компоненты получают данные напрямую из хранилищ (не нужно прокидывать данные по дереву)
- Компоненты взаимодействуют с внешним миром через хранилища (получение данных) и действия (отправка данных)
Flux + React + Node.js
- Поддержка браузеров без JavaScript
- Улучшение времени первой загрузки
- Поисковые роботы / SEO
Flux
By Philipp Nehaev
