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 может запускать действие.
Действие отправляется с полезной нагрузкой.
Магазины регистрируются в типах действий, а также обновляются и отправляются.
При изменении в магазине состояния просмотра также обновляются и могут повторно отображаться.