React
Использование ReactJS в потоке Flux
Поиск…
Вступление
замечания
Flux - это архитектура приложений, используемая Facebook для создания клиентских веб-приложений. Он дополняет составные компоненты представления React, используя однонаправленный поток данных. Это скорее шаблон, чем формальная структура, и вы можете сразу начать использовать Flux без большого количества нового кода.
Приложения Flux имеют три основные части: диспетчер , магазины и виды (компоненты React). Их не следует путать с Model-View-Controller. Контроллеры существуют в приложении Flux, но они представляют собой представления контроллера - представления, которые часто встречаются в верхней части иерархии, которые извлекают данные из хранилищ и передают эти данные своим детям. Кроме того, создатели действий - вспомогательные методы диспетчера - используются для поддержки семантического API, который описывает все изменения, которые возможны в приложении. Полезно подумать о них как о четвертой части цикла обновления потока.
Flux избегает MVC в пользу однонаправленного потока данных. Когда пользователь взаимодействует с представлением React, представление передает действие через центральный диспетчер в различные магазины, в которых хранятся данные и бизнес-логика приложения, которые обновляют все просмотренные виды. Это особенно хорошо работает с декларативным стилем программирования React, который позволяет магазину отправлять обновления без указания способа перехода между состояниями.
Поток данных
Это общий обзор .
Образец потока предполагает использование однонаправленного потока данных.
Действие - простой объект, описывающий
typeдействия и другие входные данные.Диспетчер - контроллер приемника с одним действием и обратный вызов. Представьте, что это центральный центр вашего приложения.
Store - содержит состояние приложения и логику. Он регистрирует обратный вызов в диспетчере и испускает событие для просмотра, когда произошло изменение уровня данных.
View - React компонент, который получает событие изменения и данные из хранилища. Это вызывает повторный рендеринг, когда что-то изменяется.
По потоку потока данных представления также могут создавать действия и передавать их диспетчеру для взаимодействия с пользователем.
Отменено
Чтобы сделать его более ясным, мы можем начать с самого конца.
Различные компоненты React ( views ) получают данные из разных магазинов о внесенных изменениях.
Немногие компоненты можно назвать видами контроллеров , потому что они предоставляют код клея для получения данных из магазинов и передачи данных по цепочке их потомков. Представления контроллера представляют собой любой важный раздел страницы.
Магазины можно отметить как обратные вызовы, которые сравнивают тип действия и другие входные данные для бизнес-логики вашего приложения.
Диспетчер является общим приемом приемника и callbacks контейнера.
Действия - это не что иное, как простые объекты с требуемым свойством
type.Раньше вы хотели бы использовать константы для типов действий и вспомогательных методов (называемых создателями действий ).