Глоссарий

Это глоссарий основных терминов Redux, вместе с их типами сигнатур. Типы документированы с использованием нотации Flow.

Состояние

type State = any

Состояние (также называемое деревом состояния) — это общий термин, но в API Redux он обычно относится к единственному значению состояния, управляемому хранилищем и возвращаемому функцией getState(). Оно представляет собой всё состояние приложения Redux, которое часто является глубоко вложенным объектом.

По соглашению, верхнеуровневое состояние — это объект или какое-либо другое коллекция пар «ключ-значение», например, Map, но технически это может быть любой тип. Тем не менее, вы должны по возможности сохранять состояние в сериализуемом виде. Не помещайте в него ничего, что нельзя легко преобразовать в JSON.

Действие

type Action = Object

Действие — это простой объект, представляющий собой намерение изменить состояние. Действия — единственный способ получить данные в хранилище. Любые данные, будь то из событий пользовательского интерфейса, обратных вызовов сети или других источников, таких как WebSocket, в конечном итоге должны быть отправлены как действия.

Действия должны иметь поле type, указывающее тип выполняемого действия. Типы можно определять как константы и импортировать из другого модуля. Лучше использовать строки для type вместо символов, потому что строки сериализуемы.

Помимо type, структура объекта действия полностью зависит от вас. Если вы заинтересованы, ознакомьтесь с Flux Standard Action для рекомендаций по построению действий.

См. также асинхронное действие ниже.

Редьюсер

type Reducer<S, A> = (state: S, action: A) => S

Редьюсер (также называемая функцией редукции) — это функция, которая принимает накопление и значение и возвращает новое накопление. Они используются для уменьшения набора значений до одного значения.

Редьюсеры не уникальны для Redux — это фундаментальная концепция функционального программирования. Даже большинство языков, не использующих функциональный подход, как JavaScript, имеют встроенный API для редукции. В JavaScript это Array.prototype.reduce().

В Redux накопленное значение — это объект состояния, а значения, которые накапливаются, — это действия. Редьюсеры рассчитывают новое состояние, исходя из предыдущего состояния и действия. Они должны быть чистыми функциями — функциями, которые возвращают ровно один и тот же результат для заданных входных данных. Они также должны быть свободны от побочных эффектов. Это то, что позволяет использовать такие интересные возможности, как горячая перезагрузка и путешествие во времени.

Редьюсеры — самая важная концепция в Redux.

Не помещайте API-вызовы в редьюсеры.

Функция диспатча

type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any

Функция диспатча (или просто функция отправки) — это функция, которая принимает действие или асинхронное действие; после чего она может или не может отправить одно или несколько действий в хранилище.

Мы должны различать функции диспатча в целом и базу dispatch функции, предоставляемой экземпляром хранилища без каких-либо мидлверов.

Базовая функция диспатча всегда синхронно отправляет действие в редьюсер хранилища, вместе с предыдущим состоянием, возвращаемым хранилищем, для расчёта нового состояния. Она ожидает, что действия будут простыми объектами, готовыми к обработке редьюсером.

Мидлвер оборачивает базу функции диспатча. Это позволяет функции диспатча обрабатывать асинхронные действия в дополнение к действиям. Мидлвер может преобразовывать, задерживать, игнорировать или по-другому интерпретировать действия или асинхронные действия перед передачей их следующему мидлверу. Подробная информация об этом ниже.

Создатель действия

type ActionCreator = (...args: any) => Action | AsyncAction

Создатель действия — это, очень просто, функция, которая создаёт действие. Не путайте эти два понятия — действие представляет собой набор информации, а создатель действия — фабрика, которая создаёт действие.

Вызов создателя действия только создаёт действие, но не отправляет его. Вам нужно вызвать функцию хранилища dispatch, чтобы фактически вызвать изменение. Иногда мы говорим связанные создатели действий, чтобы обозначить функции, которые вызывают создателя действия и немедленно отправляют его результат в определённый экземпляр хранилища.

Если создателю действия нужно прочитать текущее состояние, выполнить вызов API или вызвать побочный эффект, например, переход маршрута, он должен вернуть асинхронное действие вместо действия.

Асинхронное действие

type AsyncAction = any

Асинхронное действие — это значение, которое отправляется функции диспатча, но ещё не готово к обработке редьюсером. Оно будет преобразовано мидлвером в действие (или серию действий) перед отправкой в базу функции dispatch(). Асинхронные действия могут иметь различные типы в зависимости от используемого мидлвера. Они часто представляют собой асинхронные примитивы, такие как Promise или thunk, которые не передаются редьюсеру сразу, но запускают отправку действий, когда операция завершена.

Мидлвер

type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch

Мидлвер — это функция высшего порядка, которая комбинирует функцию диспатча для возврата новой функции диспатча. Она часто преобразует асинхронные действия в действия.

Мидлверы компонуются с помощью композиции функций. Они полезны для ведения журнала действий, выполнения побочных эффектов, например, перенаправления, или преобразования асинхронного вызова API в серию синхронных действий.

См. applyMiddleware(...middlewares) для подробного рассмотрения мидлверов.

Хранилище

type Store = {
  dispatch: Dispatch
  getState: () => State
  subscribe: (listener: () => void) => () => void
  replaceReducer: (reducer: Reducer) => void
}

Хранилище — это объект, который содержит дерево состояния приложения.
В приложении Redux должно быть только одно хранилище, так как композиция происходит на уровне редьюсера.

• dispatch(action) — это базовая функция диспатча, описанная выше.
• getState() возвращает текущее состояние хранилища.
• subscribe(listener) регистрирует функцию, которая вызывается при изменении состояния.
• replaceReducer(nextReducer) можно использовать для реализации горячей перезагрузки и разделения кода. Вероятнее всего, вы им не будете пользоваться.

Для получения дополнительной информации см. полную ссылку на API хранилища.

Создатель хранилища

type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store

Создатель хранилища — это функция, которая создаёт хранилище Redux. Как и с функцией диспатча, мы должны различать базовый создатель хранилища, createStore(reducer, preloadedState), экспортируемый из пакета Redux, от создателей хранилищ, которые возвращаются из улучшителей хранилища.

Улучшитель хранилища

type StoreEnhancer = (next: StoreCreator) => StoreCreator

Улучшитель хранилища — это функция высшего порядка, которая комбинирует создатель хранилища, чтобы вернуть нового, улучшенного создателя хранилища. Это похоже на мидлверы, позволяя изменять интерфейс хранилища композиционным способом.

Улучшители хранилищ — это та же концепция, что и компоненты высшего порядка в React, которые также иногда называются «улучшителями компонентов».

Поскольку хранилище не является экземпляром, а представляет собой простой объект с набором функций, копии можно легко создавать и изменять, не изменяя исходное хранилище. Пример приведён в документации по compose.

Вероятно, вы никогда не будете писать улучшитель хранилища, но вы можете использовать тот, который предоставляет инструменты разработчика. Именно он делает путешествие во времени возможным, не осведомляя об этом приложение. Интересно, что реализация мидлвера Redux сама является улучшителем хранилища.