Основная концепция Flux заключается в однонаправленном потоке данных (unidirectional data flow). Состояние приложения хранится в одном месте (Store), и изменения этого состояния возможны только через Dispatcher, который обрабатывает Actions.
Ключевые элементы Flux:
- Actions: Описывают, что произошло в приложении (например, "пользователь нажал кнопку"). Содержат тип действия и полезную нагрузку (payload) с данными.
- Dispatcher: Единственная точка входа для всех Actions. Перенаправляет Actions в Store.
- Store: Содержит состояние определенной части приложения и логику его изменения в ответ на Actions. Store эмитирует события об изменении состояния (Change Event).
- Views: Представление пользовательского интерфейса. Отображают состояние из Store. Реагируют на события изменения Store и обновляются соответствующим образом. View не изменяют состояние напрямую, а создают Actions.
Поток данных:
- Пользователь взаимодействует с View.
- View создает Action.
- Action отправляется в Dispatcher.
- Dispatcher перенаправляет Action в Store.
- Store обрабатывает Action, изменяет свое состояние и эмитирует Change Event.
- View, подписанные на Store, получают Change Event и обновляются, отображая новое состояние.
javascript
Flux обеспечивает предсказуемое управление состоянием и упрощает отладку за счет явного и контролируемого потока данных.