Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →
Глоссарий
Здесь представлены ключевые термины Redux с их сигнатурами типов. Типы документированы с использованием нотации Flow.
Состояние (State)
type State = any
Состояние (также называемое деревом состояния) — широкое понятие, но в Redux API обычно относится к единому значению состояния, которым управляет хранилище и которое возвращается методом getState(). Оно представляет полное состояние приложения Redux, часто являясь глубоко вложенным объектом.
По соглашению, состояние верхнего уровня — это объект или другая коллекция ключ-значение (например, Map), хотя технически может быть любого типа. Тем не менее, следует максимально сохранять состояние сериализуемым. Не помещайте в него то, что нельзя легко преобразовать в JSON.
Действие (Action)
type Action = Object
Действие — простой объект, представляющий намерение изменить состояние. Действия — единственный способ передачи данных в хранилище. Любые данные (события UI, сетевые колбэки, WebSockets и т.д.) должны быть в конечном итоге отправлены как действия.
Действия обязаны иметь поле type, указывающее тип выполняемого действия. Типы можно определять как константы и импортировать из других модулей. Лучше использовать строки для type, чем Symbols, поскольку строки сериализуемы.
Кроме type, структура объекта действия полностью определяется разработчиком. Рекомендации по построению действий можно найти в Flux Standard Action.
См. также раздел асинхронное действие ниже.
Редюсер (Reducer)
type Reducer<S, A> = (state: S, action: A) => S
Редюсер — функция, принимающая аккумулированное значение и новое значение, возвращающая новое аккумулированное значение. Используется для свёртки коллекции значений в единое значение.
Редюсеры не уникальны для Redux — это фундаментальная концепция функционального программирования. Даже в нефункциональных языках (включая JavaScript) есть встроенный API для свёртки. В JavaScript это Array.prototype.reduce().
В Redux аккумулируемое значение — объект состояния, а добавляемые значения — действия. Редюсеры вычисляют новое состояние на основе предыдущего состояния и действия. Они должны быть чистыми функциями — возвращать одинаковый результат для одинаковых входных данных без побочных эффектов. Это обеспечивает такие возможности как "горячая" перезагрузка и "машина времени".
Редюсеры — ключевая концепция в Redux.
Не размещайте вызовы API в редюсерах.
Функция отправки (Dispatching Function)
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
Функция отправки (или просто dispatch-функция) — функция, принимающая действие или асинхронное действие, которая может отправить одно или несколько действий в хранилище.
Важно различать dispatch-функции в целом и базовую функцию dispatch, предоставляемую экземпляром хранилища без middleware.
Базовая dispatch-функция всегда синхронно передаёт действие в редюсер хранилища вместе с предыдущим состоянием для вычисления нового состояния. Она ожидает, что действия будут простыми объектами, готовыми для обработки редюсером.
Middleware оборачивает базовую dispatch-функцию, позволяя ей обрабатывать асинхронные действия. Middleware может преобразовывать, задерживать, игнорировать или интерпретировать действия перед передачей следующему middleware. Подробнее см. ниже.
Создатель действия (Action Creator)
type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction
Создатель действия (action creator) — это, попросту говоря, функция, которая создает действие. Не путайте эти два термина: действие представляет собой информационную нагрузку, а создатель действия — это фабрика, производящая действия.
Вызов создателя действия только генерирует действие, но не отправляет его. Чтобы фактически инициировать изменение, необходимо вызвать функцию dispatch хранилища. Иногда используются привязанные создатели действий — функции, которые вызывают создатель действия и немедленно отправляют результат в конкретный экземпляр хранилища.
Если создателю действия требуется прочитать текущее состояние, выполнить API-вызов или вызвать побочный эффект (например, переход между маршрутами), он должен возвращать асинхронное действие вместо обычного действия.
Асинхронное действие (Async Action)
type AsyncAction = any
Асинхронное действие — это значение, отправляемое в функцию отправки, но ещё не готовое для обработки редьюсером. Оно будет преобразовано промежуточным ПО в действие (или серию действий) перед передачей в базовую функцию dispatch(). Типы асинхронных действий зависят от используемого промежуточного ПО. Обычно это асинхронные примитивы (например, Promise или thunk), которые не передаются редьюсеру напрямую, но инициируют отправку действий по завершении операции.
Middleware
type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
Промежуточное ПО (middleware) — это функция высшего порядка, которая преобразует функцию отправки для возврата новой функции отправки. Часто оно превращает асинхронные действия в стандартные действия.
Промежуточное ПО компонуемо через функциональную композицию. Оно полезно для логирования действий, обработки побочных эффектов (например, маршрутизации) или преобразования асинхронных API-вызовов в последовательность синхронных действий.
Подробнее о промежуточном ПО см. в applyMiddleware(...middlewares).
Хранилище (Store)
type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}
Хранилище (store) — это объект, содержащий дерево состояния приложения. В Redux-приложении должно быть только одно хранилище, так как композиция происходит на уровне редьюсеров.
-
dispatch(action)— базовая функция отправки, упомянутая выше. -
getState()— возвращает текущее состояние хранилища. -
subscribe(listener)— регистрирует функцию для вызова при изменениях состояния. -
replaceReducer(nextReducer)— используется для горячей перезагрузки и разделения кода. В большинстве случаев не требуется.
Подробнее см. в полном справочнике API хранилища.
Создатель хранилища (Store creator)
type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
Создатель хранилища — это функция, создающая хранилище Redux. Как и с функцией отправки, важно различать базового создателя createStore(reducer, preloadedState) из пакета Redux и создателей, возвращаемых усилителями хранилища.
Усилитель хранилища (Store enhancer)
type StoreEnhancer = (next: StoreCreator) => StoreCreator
Усилитель хранилища — это функция высшего порядка, которая комбинирует создателя хранилища для возврата нового улучшенного создателя. Похоже на промежуточное ПО: позволяет изменять интерфейс хранилища композируемым способом.
Усилители хранилища концептуально близки к компонентам высшего порядка в React, которые иногда называют «усилителями компонентов».
Поскольку хранилище — это не экземпляр, а простая коллекция функций в виде объекта, его копии можно легко создавать и модифицировать без изменения оригинала. Пример есть в документации к compose.
Скорее всего, вы не будете писать усилители хранилища, но можете использовать предоставляемые инструментами разработчика. Именно они обеспечивают «путешествие во времени» без явного участия приложения. Забавно, что реализация промежуточного ПО Redux сама является усилителем хранилища.