Что такое dispatch redux
Стор (Store)
Примечания для пользователей Flux
Методы стора
Методы стора
getState()
Возвращает текущее состояние вашего приложения. Оно равно последнему возвращенному значению из редюсера стора.
Возвращает
(any): Текущее состояние вашего приложения.
dispatch(action)
Отправляет экшен. Это единственный способ изменить состояние.
Функция редюсера стора будет вызвана с текущим результатом getState() и переданным dispatch (action) синхронно. Возвращенное значения будет содержать следующие состояние. Оно будет возвращено из getState() сразу же и подписчики будут немедленно уведомлены.
Примечания для пользователей Flux
Если вы попытаетесь вызвать dispatch изнутри редюсера, то возникнет ошибка «Редюсеры не могут отправлять экшены». Это аналогично ошибке во Flux «Нельзя отправлять в середине отправки», но это не вызвано проблемами связанными с ним. Во Flux отправлять запрещено пока стор не обработает экшен и запустит обновление. Это сделано для того, чтобы сделать невозможным отправку экшенов из хуков жизненного цикла компонент или других слабых мест.
В Redux, подписки вызванные после корневого редюсера возвращают новое состояние, поэтому вы можете отправлять в подписанных слушателей. Вам только запрещено отправлять внутри редюсера, потому что они не должны вызывать побочных эффектов. Если вы хотите вызывать побочный эффект вызванный в ответ на экшен, то правильно это сделать в потенциально асинхронном генераторе экшенов.
Параметры
Возвращает
(Object † ): Посланный экшен
Заметки
Mидлвары созданы сообществом и не поставляются с Redux по умолчанию. Вы должны явно установить пакеты, такие как redux-thunk или redux-promise для их использования. Вы также можете создать свои собственные мидлвары.
Пример
subscribe(listener)
Вы можете вызвать dispatch() из слушателя изменений со следующими оговорками:
Слушатель должен только вызывать dispatch() либо в ответ на действия пользователя, либо в определенных условиях (например, отправление экшена, когда стор имеет конкретное поле). Вызов dispatch() без каких-либо условий технически возможен, однако это приводит к бесконечному циклу, так как каждый вызов dispatch() обычно снова вызывает слушателя.
Параметры
Возвращает
(Function): Функция которая отписывает слушателя.
Примеры
replaceReducer(nextReducer)
Заменяет редюсер, который в настоящее время используется стором, чтобы вычислить состояние.
Это продвинутое API. Вам возможно понадобится это, если ваше приложение реализует разделение кода и вы хотите загрузить некоторые редюсеры динамично. Вам также это может понадобиться, если вы реализуете горячий механизм перезагрузки для Redux.
Глоссарий
Это глоссарий основных терминов в Redux, наряду с их сигнатурами типа. Типы описаны при помощи Flow notation.
Состояние (State)
Как правило, состояние верхнего уровня — это объект или какая-то другая коллекция вида ключ-значение, например Map, но технически это может быть любой тип. Вместе с тем, вам нужно стараться поддерживать состояние сериализуемым. Не кладите внутрь ничего, что потом не сможете легко превратить в JSON.
Экшен (Action)
Экшен — это простой объект, который представляет намерение изменить состояние. Экшены — единственный путь получить данные в сторе. Любые данные, будь то события UI, коллбэки сетевых запросов или любые другие ресурсы как веб-сокеты, должны быть в итоге обработаны, как экшены.
Редюсер (Reducer)
Редюсер (так же называемая, как функция-редюсер) — это функция, которая принимает аккумулятор и значение и возвращает новый аккумулятор. Они используются для редуцирования (сокращения) коллекции значений в единственное значение.
В Redux, аккумулирумое значение — это объект состояния, а значения, которые должны быть аккумулированы — это экшены. Редюсеры расчитывают новое состояние, учитывая предыдущее состояние и экшен (action). Они обязаны быть чистыми функциями — функциями, которые возвращают одинаковый результат для переданных входных данных. Они также не должны иметь побочных эффектов (side-effects). Это то, что обеспечивает интересные возможности, такие как «горячая перезагрузка» (hot reloading) и путешествия во времени (time travel).
Редюсеры являются наиболее важным понятием в Redux.
Не размещайте вызовы API в редюсерах.
Функция-диспетчер (Dispatching Function)
Базовая функция dispatch всегда синхронно отправляет экшен в редюсер вместе с предыдущим состоянием, возвращенным из стора, для вычисления нового состояния. Оно ожидает экшен в виде простых объектов, готовых для использования в редюсере.
Мидлвар оборачивает базовую функцию dispatch. Это позволяет функции-диспетчеру обрабатывать асинхронные экшены в дополнение к обычным экшенам. Мидлвар может преобразовывать, задерживать, игнорировать или иным образом интерпретировать экшены или асинхронные экшены перед передачей их к следующему мидлвару. См. ниже для получения дополнительной информации.
Генератор экшена (Action Creator)
Вызов генератора экшена только создает экшен, но не выполняет его. Вам нужно вызвать функцию стора dispatch которая на самом деле вызывает изменения. Иногда мы говорим связанные генераторы экшенов имея ввиду функции, которые вызывают генератор экшена и сразу же отправляют его результат соответствующей части стора.
Если генератору экшена надо получить текущее состояние, выполнить вызов API или вызвать побочный эффект, как переход маршрутизации, это должно быть возвращено асихронным экшеном (async action) вместо обычного экшена.
Асинхронный экшен (Async Action)
Мидлвар (Middleware)
Мидлвар — это функция высшего порядка, которая создает функцию-диспетчер (dispatch function), возвращающую новую функцию-диспетчер. Она часто возвращает асинхронный экшен в экшен.
См. applyMiddleware(. middlewares) для более детальной информации по мидлварам.
Стор (Store)
Стор — это объект, который хранит дерево состояний приложения. В приложении должно быть только один стор, так построение происходит на уровне преобразователя (reducer).
См. store API reference для получения дополнительной информации.
Генератор стора (Store creator)
Генератор стора — это функция, которая создает Redux-стор. Как и в случае с отправляющей функцией, мы должны различать базовый генератор стора, createStore(reducer, initialState) экспортирумый из Redux, от генератора стора, возвращаемого из расширителей стора (store enhancers).
Расширитель стора (Store enhancer)
Расширитель стора — это функция высшего порядка, которая создает генератор стора, возвращающий новый, расширенный генератор стора. Это похоже на мидлвар тем, что позволяет вам изменять интерфейс в композиционном стиле.
Поскольку стора является не инстансом, а скорее объектом-коллекцией функций, то копии могут быть запросто созданы и модифицированы, без изменения оригинального стора. Пример в описании compose демонстрирует это.
Скорее всего, вы никогда не будете писать расширитель стора, но вы можете использовать один предоставленный developer tools. Это то, что делает «путешествие во времени» (time travel) возможным без информирования приложения, о том, что происходит. Занятно, что реализация Redux мидлваров сама по себе является расширителем стора.
Redux + React: основы
Redux является предсказуемым контейнером состояния для JavaScript приложений. Это позволяет вам создавать приложения, которые ведут себя одинаково в различных окружениях (клиент, сервер и нативные приложения), а также просто тестируются.
Redux решает проблему управления состоянием в приложении, предлагая хранить данные в глобальном State, и централизованно изменяя его.
Установка
Reducer
Это функция, которая принимает на вход команды и изменяет state. Если тип action неизвестен, возвращаем state. Пример реализации на JavaScript:
Redux-store
Store содержит всё дерево состояний приложения. Единственный способ изменить состояние внутри него — отправить на него action.
createStore(reducer)
Store — это не класс. Это просто объект с несколькими методами. Чтобы создать его, передайте свою функцию в createStore
getState()
Возвращает текущее дерево состояний вашего приложения. Он равен последнему значению, которое возвращает store’s reducer.
dispatch(action)
store.dispatch(action) — отправляет команду, и это единственный способ вызвать изменение состояния store.
Store’s reducer будет вызываться с текущим getState() результатом и заданным action, синхронно. Его возвращаемое значение будет считаться следующим состоянием. Он будет возвращен с новым getState(), и слушатели изменений будут немедленно уведомлены.
subscribe(listener)
Добавляет слушателя изменений. Вызывается каждый раз, когда store может быть изменён.
Как это работает вместе
Actions Creators
В store может передаваться много данных, поэтому бывает удобно сделать функции создатели действий.
bindActionCreators()
Превращает объект, значения которого являются actions creators, в объект с теми же ключами, но с каждым action creator, заключенным в dispatch-вызов, чтобы их можно было вызывать напрямую.
Единственный вариант использования для bindActionCreators- это когда вы хотите передать actions creators в компонент, который не знает о Redux, и вы не хотите передавать dispatch или хранить Redux в нем.
Структура проекта
Если у много actions creators, разумно вынести их в отдельный файл, или папку. То же касается Reducer’а.
React-Redux
Provider
connect()
connect — это компонент высшего порядка (HOC), который создаёт новые компоненты.
Что такое dispatch redux
Примечания для пользователей Flux
getState() ¶
Возвращает текущее состояние вашего приложения. Оно равно последнему возвращенному значению из редьюсера стора.
Возвращает
(any) Текущее состояние вашего приложения.
dispatch(action) ¶
Отправляет экшен. Это единственный способ изменить состояние.
Функция редьюсера стора будет вызвана с текущим результатом getState() и переданным dispatch (action) синхронно. Возвращенное значения будет содержать следующие состояние. Оно будет возвращено из getState() сразу же и подписчики будут немедленно уведомлены.
Примечания для пользователей Flux
Если вы попытаетесь вызвать dispatch изнутри редьюсера, то возникнет ошибка «Редьюсеры не могут отправлять экшены». Это аналогично ошибке во Flux «Нельзя отправлять в середине отправки», но это не вызвано проблемами связанными с ним. Во Flux отправлять запрещено пока стор не обработает экшен и запустит обновление. Это сделано для того, чтобы сделать невозможным отправку экшенов из хуков жизненного цикла компонент или других слабых мест.
В Redux, подписки вызванные после корневого редьюсера возвращают новое состояние, поэтому вы можете отправлять в подписанных слушателей. Вам только запрещено отправлять внутри редьюсера, потому что они не должны вызывать побочных эффектов. Если вы хотите вызывать побочный эффект вызванный в ответ на экшен, то правильно это сделать в потенциально асинхронном генераторе экшенов.
Параметры
Возвращает
(Object) Посланный экшен
Заметки
Mидлвары созданы сообществом и не поставляются с Redux по умолчанию. Вы должны явно установить пакеты, такие как redux-thunk или redux-promise для их использования. Вы также можете создать свои собственные мидлвары.
Пример¶
subscribe(listener) ¶
Вы можете вызвать dispatch() из слушателя изменений со следующими оговорками:
Слушатель должен только вызывать dispatch() либо в ответ на действия пользователя, либо в определенных условиях (например, отправление экшена, когда стор имеет конкретное поле). Вызов dispatch() без каких-либо условий технически возможен, однако это приводит к бесконечному циклу, так как каждый вызов dispatch() обычно снова вызывает слушателя.
Параметры
Возвращает
(Function) Функция которая отписывает слушателя.
Примеры¶
replaceReducer(nextReducer) ¶
Заменяет редьюсер, который в настоящее время используется стором, чтобы вычислить состояние.
Это продвинутое API. Вам возможно понадобится это, если ваше приложение реализует разделение кода и вы хотите загрузить некоторые редьюсеры динамично. Вам также это может понадобиться, если вы реализуете горячий механизм перезагрузки для Redux.
Параметры
reducer (Function) Следующий редьюсер для стора который будет использован.
Краткое руководство по Redux для начинающих
Библиотека Redux — это способ управления состоянием приложения. Она основана на нескольких концепциях, изучив которые, можно с лёгкостью решать проблемы с состоянием. Вы узнаете о них далее, в этом руководстве по Redux для начинающих.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Содержание:
Когда нужно пользоваться Redux?
Redux идеально использовать в средних и крупных приложениях. Им стоит пользоваться только в случаях, когда невозможно управлять состоянием приложения с помощью стандартного менеджера состояний в React или любой другой библиотеке.
Простым приложениям Redux не нужен.
Использование Redux
Разберём основные концепции библиотеки Redux, которые нужно понимать начинающим.
Неизменяемое дерево состояний
В Redux общее состояние приложения представлено одним объектом JavaScript — state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, изменить ничего напрямую нельзя. Изменения возможны только при отправке action (действия).
Действия
Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:
Типы действий должны быть константами
В простом приложении тип действия задаётся строкой. По мере разрастания функциональности приложения лучше переходить на константы:
и выносить действия в отдельные файлы. А затем их импортировать:
Генераторы действий
Генераторы действий (actions creators) — это функции, создающие действия.
Обычно инициируются вместе с функцией отправки действия:
Или при определении этой функции:
Редукторы
При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редукторов.
Что такое редуктор
Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.
Чистая функция работает независимо от состояния программы и выдаёт выходное значение, принимая входное и не меняя ничего в нём и в остальной программе. Получается, что редуктор возвращает совершенно новый объект дерева состояний, которым заменяется предыдущий.
Чего не должен делать редуктор
Редуктор — это всегда чистая функция, поэтому он не должен:
Поскольку состояние в сложных приложениях может сильно разрастаться, к каждому действию применяется не один, а сразу несколько редукторов.
Симулятор редуктора
Упрощённо базовую структуру Redux можно представить так:
Состояние
Список действий
Редуктор для каждой части состояния
Редуктор для общего состояния
Хранилище
Хранилище (store) — это объект, который:
Хранилище в приложении всегда уникально. Так создаётся хранилище для приложения listManager:
Хранилище можно инициировать через серверные данные:
Функции хранилища
Прослушивание изменений состояния:
Поток данных
Поток данных в Redux всегда однонаправлен.
Передача действий с потоками данных происходит через вызов метода dispatch() в хранилище. Само хранилище передаёт действия редуктору и генерирует следующее состояние, а затем обновляет состояние и уведомляет об этом всех слушателей.
Советуем начинающим в Redux прочитать нашу статью о других способах передачи данных.