React: отслеживание с помощью Flux
Архивировано из моего предыдущего блога. Первоначально опубликовано: 11 августа 2015 г.
Напомним, ранее мы рассмотрели однонаправленный поток данных Flux. Теперь мы пройдемся по каждой части архитектуры, как она может встречаться в приложении. Используемый здесь пример основан на приложении для обмена фотографиями Picarus.
ДЕЙСТВИЕ:
– взаимодействие пользователя с представлением или вызовом/ответом API.
В компоненте просмотра фотографий, в котором у каждой фотографии есть комментарии, щелчок по фотографии должен загрузить ее комментарии:
onSubmit : function(){ AppActions.loadComments(photoId) }
Думайте об этом так: действие может происходить из просмотра
ДИСПЕТЧЕР:
– транслирует начатое действие во все магазины.
- Во всех магазинах есть диспетчер (подробнее об этом позже).
- Думайте о диспетчере как о забрасывающем крючки.
Из модуля Действия:
loadComments: function(photoId){ axios.get(‘/api/requests/’+id) // axios is an HTTP client .then(function(response) { // server query of database returns comments AppDispatcher.dispatch({ type: AppConstants.RECEIVE_COMMENTS, // AppConstants are just the specific names for each type of action the app passes around data: data // payload (two things) }); }); }
*приведенный выше код можно изменить, чтобы использовать служебную функцию для извлечения комментариев к фотографии из базы данных. Я объединил все, чтобы показать, как методы действий используют диспетчер для передачи данных.
Подумайте об этом так: Dispatch происходит внутри метода Action.
STORE:
– содержит модель (источник достоверности), которую состояния вашего представления используют для рендеринга. Эта модель может выглядеть примерно так:
var _comments = {};
Напомним, что Dispatcher выбрасывает хуки. Магазины могут цепляться за определенные крючки, перехватывая их, например, с помощью операторов switch. Таким образом, когда хук RECEIVE_COMMENTS вибрирует, защелкивающиеся магазины, такие как CommentStore ниже, почувствуют это, обновят и вызовут событие.
Из модуля CommentStore:
CommentStore.dispatchToken = AppDispatcher.register(function(action) { switch(action.type) { case AppConstants.RECEIVE_COMMENTS: _receiveComments(action.data); RequestStore.emitChange(); break; default: } }
Я буду более подробно рассказывать о магазинах и просмотрах в следующем посте в блоге, поэтому не беспокойтесь слишком много о методах, описанных выше. Просто знайте, что при отправке типа действия RECEIVE_COMMENTS CommentStore обновит свой источник правды полезной нагрузкой действия и выдаст событие, сигнализирующее об этом.
Думайте об этом так: Действия обновляют Магазины путем отправки с помощью определенных типов действий, в которых Магазины могут регистрироваться.
ВИДЫ:
— сам компонент React. Состояние компонента — это то, что управляет его повторным рендерингом, когда он наполняет виртуальный DOM новой информацией.
Состояние компонента обновляется всякий раз, когда хранилище генерирует связанное с ним событие. Как оно работает? Прикрепив eventListeners из Store.
Из компонента просмотра фотографий:
// attach listener componentDidMount: function(){ RequestStore.addChangeListener(this._onChange); } // update state with Store method that gets Store’s model _onChange: function () { this.setState({photoComments: CommentStore.getComment(photoId)}); }
Компонент передает установщик состояния в качестве обратного вызова, который будет выполняться всякий раз, когда CommentStore генерирует соответствующее событие. Таким образом, когда данные в источнике достоверности изменяются, это изменение отражается в состоянии представления, и оттуда компонент перерисовывает себя.
Подводя итог, следуйте следующему алгоритму:
Представление/API может запускать действие.
Действие отправляется с полезной нагрузкой.
Магазины регистрируются в типах действий, а также обновляются и отправляются.
При изменении в магазине состояния просмотра также обновляются и могут повторно отображаться.