Изучите Flux на простом примере
В этом примере предполагается, что у вас есть некоторый опыт работы с React. Вам не нужно ничего знать, кроме написания Компонента и работы с некоторыми базовыми методами жизненного цикла.
Наконец, в этом примере предполагается, что вы создали обычное приложение React, используя официальный скрипт Create React App.
Итак, давайте напишем наше первое приложение Flux!
Во-первых, нам нужно добавить в проект флюс:
npm install flux
Когда это будет завершено, мы должны настроить несколько папок. Flux использует множество разных объектов, поэтому мы захотим организовать наш проект немного по-другому.
cd src mkdir actions mkdir components mkdir lib mkdir stores mkdir utils
Добавляем новый компонент в наш проект
Для этого проекта у нас будет компонент App, который монтирует наш компонент Users на странице.
Итак, сначала давайте создадим новый файл с именем Users.js внутри папки src / components. Его содержимое должно выглядеть так:
Это так же просто, как и для компонента. Теперь давайте воспользуемся этим компонентом в App.js, для этого нам нужно изменить файл, чтобы он выглядел так:
Обновите компонент "Пользователи"
Наш компонент Users будет загружать пользователей для нашего приложения и отображать их на странице. Давайте для этого напишем код:
После обновления браузера вы увидите сообщение о загрузке и отсутствие пользователей.
Это имеет смысл. Мы устанавливаем для нашего начального состояния загружено значение false, и оно никогда не меняется. Однако мы не хотим, чтобы наш компонент менял это. Мы хотим, чтобы наш компонент БЫЛ изменялся при загрузке пользователей.
В этом вся идея Flux!
Итак, давайте создадим UsersStore, который наш компонент может использовать в первую очередь для получения своего начального состояния.
Эта функция getState решит получение состояния. Но как насчет уведомления нашего компонента «Пользователи» при его изменении? Для этого нам нужно будет использовать событие. Чтобы использовать события, нам нужно включить библиотеку и создать экземпляр EventEmitter.
Обновите UsersStore этим кодом сейчас:
Теперь мы можем обновить компонент Users с помощью кода, который нам понадобится, чтобы получить наше начальное состояние, а затем получать уведомления при его изменении!
После обновления браузера все по-прежнему, но теперь мы готовы к изменениям, чтобы обновить наш компонент.
Настройка нашего первого действия
У объектов действия есть две основные обязанности - уведомить диспетчера о выполнении действия… и затем выполнить действие. Когда мы работаем с Flux, любые изменения общих данных (включая их загрузку) означают, что нам нужно отправить действие диспетчеру. Для этого мы используем объект, который мы называем создателем действия. Итак, давайте начнем с добавления вызова действия к нашему методу componentDidMount, мы уже добавили слушателя, но еще не пытались загрузить пользователей ...
Там! Вы также должны заметить, что нам нужно было установить требование к файлу, который содержит определение для нашего объекта UsersActionCreators. Теперь давайте создадим этот файл внутри папки действий. его имя UsersActionCreators.js:
Итак, этот файл довольно простой, это стандартный литерал объекта, и он содержит объект и метод, которые мы вызвали из нашего компонента. На следующем этапе этот объект сообщает диспетчеру о действии, которое мы собираемся выполнить. Вот как об этом думать: Действия ДЕЙСТВУЮТ с данными, но они СКАЗЫВАЮТ Диспетчеру, так что все остальные компоненты в приложении могут быть уведомлены.
Добавьте в наш UsersActionCreators.js следующее:
Итак, мы добавили в наш проект еще один объект. Диспетчер! На основе API, который мы здесь использовали, мы знаем, что у него есть метод с именем handleUsersAction и он принимает литерал объекта. Также следует отметить, что атрибут type и строка LOAD_USERS были полностью созданы для этого проекта.
Теперь добавим в корень нашего проекта новый файл: Dispatcher.js.
Добавьте в файл Dispatcher.js следующее:
Итак, это шаблонный AppDispatcher. Для вашего проекта вам понадобится только один Диспетчер.
Итак, в данный момент мы создали Action и Dispatcher. Действие сообщает диспетчеру, какое действие он собирается выполнить, но не выполнил его! Итак, давайте продолжим (наконец) и добавим вызов для данных наших пользователей.
Вернитесь в файл UsersActionCreators.js и обновите его, чтобы он выглядел следующим образом:
Итак, чтобы сделать этот пример более полным, я добавил ДРУГОЙ объект. Он называется ApiUtils и будет представлять объект, который ДЕЙСТВИТЕЛЬНО будет обращаться к какому-либо серверу и извлекать наши данные. Давайте продолжим и напишем это сейчас. Добавьте файл с именем ApiUtils.js в папку utils нашего проекта. Его содержимое должно выглядеть так:
Так что там не так уж много чего отличается от того, что мы уже сделали. В этом примере мы явно подделали вызов сервера (вы можете увеличить значение тайм-аута, чтобы имитировать длинный вызов). Также обратите внимание, что мы упомянули создателя нового действия с именем UsersServiceActionCreators и метод с именем loadedUsers. Этот метод отправит действие, чтобы сообщить системе, что загрузка завершена, и передать пользователям полезные данные! Это означает, что любой компонент, который хочет работать с последними загруженными пользователями, может это сделать!
Итак, давайте создадим UsersServiceActionCreators.js и добавим его код:
Итак, теперь у нас есть работающий Диспетчер и действия, которые отправляются (отправляются) в систему. Однако нам необходимо настроить наш магазин UsersStore для получения этих полезных данных. Каждый компонент, который вы пишете, должен получать полезные данные от Dispatcher. Затем магазин должен на них отреагировать. Снова откройте UsersStore.js и добавьте код внизу:
Если вы просмотрите консоль браузера на этом этапе, вы увидите, что распечатываются несколько сообщений:
LOAD_USERS data retrieved! USERS_LOADED
Это говорит о том, что наши сообщения работают! Действия публикуются Диспетчером, а UsersStore их получает! Теперь давайте добавим код в наш магазин UsersStore, чтобы «реагировать» на действие USERS_LOADED.
Добавьте следующий код в UsersStore.js
Мы просто добавили условие, которое ожидает действия USERS_LOADED и, когда оно возникает, устанавливает состояние UsersStore.
Последний фрагмент, который нам нужно добавить, - это функция setState. UsersStore НЕ является компонентом React, но неплохо сохранить одинаковую семантику того, как работает магазин и как работают компоненты, поэтому давайте просто напишем функцию с тем же api, что и та, которая поставляется с компонентом React. Наш последний файл UsersStore.js должен выглядеть так:
Мы добавили функцию под названием setState, которая соответствует API внутри компонента React. Мы также снова упомянули здесь assign - потому что мы хотим добавить новое состояние к нашему объекту состояния и перезаписать существующие данные, но мы не хотим заменять его и, возможно, потерять некоторые данные, которые не изменились.
Вы должны увидеть в своем браузере следующее:
picard riker data geordi
Это сработало! Теперь у нас есть полностью работающее приложение React, использующее Flux! Если бы мы хотели добавить больше действий, это означало бы просто добавить методы к нашим существующим или добавить новые файлы действий. Нам понадобится только один диспетчер, чтобы работа была сделана.
