Flux архитектура web-приложения

Архитектура flux позволяет организовывать строго однонаправленный поток данных, основанный на четырех главных компонентах:

Хранилище данных store

Хранит в себе данные, при изменении которых вызывает изменение представления, то есть перерисовку пользовательского интерфейса.

Представление view

Отображает данные в понятном для пользователя виде, отвечает за пользовательский интерфейс.

Действие action

Объект-команда, которая которая сообщает о произошедшем событии, например, когда пользователь совершают действия в интерфейсе (нажатие кнопок, ввода текста)

Диспетчер dispatcher

Центральный узел приложения, отвечает за бизнес-логику (аналог контроллера из MVC).

Содержит условные методы:

• register (function: callback): string
• Подписка на событие
• unregister (id: string)
• Отписка от события
• waitFor (id: string)
• Утилита для ожидания конкретного события
• dispatch (action)
• Отправка события

Когда action попадает в диспатчер, он распространяет action между всем модулями, которые подписаны на него.

В Redux такие модули называются редьюсеры reducers. Эти модули преобразовывают данные в хранилище.

Обновление данных влечёт перерисовку представления, и цикл замыкается

Самая популярная реализация flux-архитектуры — библиотека Redux

Redux

Особенности реализации flux в контексте redux:

store

Хранилище данных:

• Позволяет указать начальное состояние
• Подписаться на состояние store.subscribe(callback)
• Получить текущее состояние store.getState()
• Отправить событие store.dispatch(someAction())

Редюсер reducer

Чистая функция принимает на вход два аргумента: предыдущее состояние и объект-событие которое возвращает новое состояние:

const counterReduser = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default:
      return state
  }
}

Действие action

Объект состоящий из actionType и payload.

const incrementAction = {
  type: "INCREMENT",
  paload: {}
}

Представление view

Redux является агностиком и не привязывается к конкретному фреймворку или библиотеке для отображения представления.

Для работы с фреймворками существуют специальные библиотеки, например react-redux.

Мiddleware

Встраивается между action и reducer, например, для обработки асинхронных событий.

redux-thunk

Позволяет вместо объекта-команда использовать функции

Минусы

• Невозможно остановить

redux-logger

Логирование изменения состояний

redux-promise

redux-saga

redux-observable

Преимущества

• Умеет строить четкий таймлайн изменения состояния