Магазин

Магазин хранит полное дерево состояния вашего приложения. Единственный способ изменить состояние внутри него — это отправить на него действие.

Магазин — это не класс. Это просто объект с несколькими методами. Для его создания передайте свою корневую функцию-редуктор в createStore.

Примечание для пользователей Flux

Если вы переходите с Flux, важно понимать одно существенное различие. Redux не имеет диспетчера или поддержки нескольких магазинов. Вместо этого существует единственный магазин с единственной корневой функцией-редуктором. По мере роста приложения, вместо добавления магазинов, вы разделяете корневой редуктор на более мелкие редукторы, которые независимо работают с различными частями дерева состояния. Для их объединения можно использовать вспомогательный инструмент, такой как combineReducers. Это аналогично тому, как в приложении React существует только один корневой компонент, но он состоит из множества мелких компонентов.

Методы магазина

getState()

Возвращает текущее дерево состояния вашего приложения. Оно равно последнему значению, возвращённому редуктором магазина.

Возвращаемое значение

(любой тип): Текущее дерево состояния вашего приложения.

dispatch(действие)

Отправляет действие. Это единственный способ инициировать изменение состояния.

Функция-редуктор магазина будет вызвана с текущим результатом getState() и заданным action синхронно. Её возвращаемое значение будет рассматриваться как следующее состояние. Оно будет возвращено из getState() отныне, и слушатели изменений будут немедленно уведомлены.

Примечание для пользователей Flux

Если вы попытаетесь вызвать dispatch изнутри редуктора, это приведёт к ошибке с сообщением «Редукторы не могут отправлять действия». Это похоже на ошибку «Нельзя отправить действие во время отправки» в Flux, но не вызывает проблем, связанных с ней. В Flux отправка запрещена, пока магазины обрабатывают действие и генерируют обновления. К сожалению, это делает невозможным отправлять действия из обработчиков жизненного цикла компонентов или других безобидных мест.

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

Аргументы

action (Объект^†): Простой объект, описывающий изменение, которое имеет смысл для вашего приложения. Действия — единственный способ получить данные в магазин, поэтому любые данные, будь то из событий пользовательского интерфейса, обратных вызовов сети или других источников, таких как WebSocket, должны в конечном итоге отправляться как действия. У действий должен быть поле type, указывающее тип выполняемого действия. Типы могут быть определены как константы и импортированы из другого модуля. Для type лучше использовать строки, чем символы, потому что строки сериализуемы. Помимо type, структура объекта действия полностью зависит от вас. Если вас интересует, ознакомьтесь с Flux Standard Action для рекомендаций по построению действий.

Возвращаемое значение

(Объект^†): Отправленное действие (см. примечания).

Примечания

^† Реализация «vanilla» магазина, которую вы получаете, вызвав [`createStore`](/api/createstore), поддерживает только простые объекты-действия и сразу же передаёт их редуктору.

Однако, если вы обернёте createStore с помощью applyMiddleware, middleware может интерпретировать действия по-разному и обеспечить поддержку отправки асинхронных действий. Асинхронные действия обычно представляют собой асинхронные примитивы, такие как Promises, Observables или thunks.

Middleware создаются сообществом и не входят в стандартную поставку Redux по умолчанию. Для его использования необходимо явно установить пакеты, такие как redux-thunk или redux-promise. Вы также можете создать собственный middleware.

Чтобы узнать, как описать асинхронные API-вызовы, прочитать текущее состояние внутри создателей действий, выполнить побочные эффекты или объединить их для выполнения последовательно, ознакомьтесь с примерами для applyMiddleware.

Пример

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))

subscribe(слушатель)

Добавляет слушателя изменений. Он будет вызываться каждый раз, когда отправляется действие, и потенциально изменилась какая-то часть дерева состояния. Затем вы можете вызвать getState() для чтения текущего дерева состояния внутри обратного вызова.

Вы можете вызвать dispatch() из слушателя изменений, с учётом следующих ограничений:

Слушатель должен вызывать dispatch() только в ответ на действия пользователя или при определённых условиях (например, отправка действия, когда в магазине есть определённое поле). Вызов dispatch() без каких-либо условий технически возможен, но приводит к бесконечной петле, поскольку каждый вызов dispatch() обычно вызывает слушатель снова.
Подписки делаются снимком перед каждым вызовом dispatch(). Если вы подписываетесь или отписываетесь во время вызова слушателей, это не повлияет на dispatch(), который в данный момент выполняется. Однако следующий вызов dispatch(), вложенный или нет, будет использовать более свежий снимок списка подписок.
Слушатель не должен ожидать увидеть все изменения состояния, так как состояние может быть обновлено несколько раз во время вложенного вызова dispatch() до вызова слушателя. Однако гарантируется, что все подписчики, зарегистрированные до начала вызова dispatch(), будут вызваны с последним состоянием к моменту его завершения.

Это низкоуровневый API. Скорее всего, вместо прямого использования вы будете использовать React (или другие) bindings. Если вы часто используете обратный вызов как крючок для реакции на изменения состояния, вы можете написать свою собственную observeStore утилиту. Store также является Observable, поэтому вы можете subscribe к изменениям с помощью библиотек, таких как RxJS.

Для отписки от слушателя изменений вызовите функцию, возвращённую subscribe.

Аргументы

listener (Функция): Обратный вызов, вызываемый всякий раз, когда отправляется действие, и дерево состояния может измениться. Вы можете вызвать getState() внутри этого обратного вызова для чтения текущего дерева состояния. Можно ожидать, что редуктор магазина — это чистая функция, поэтому вы можете сравнить ссылки на некоторые глубокие пути в дереве состояния, чтобы узнать, изменилось ли их значение.

Возвращаемое значение

(Функция): Функция, отписывающая слушателя изменений.

Пример

function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}

const unsubscribe = store.subscribe(handleChange)
unsubscribe()

replaceReducer(nextReducer)

Заменяет редуктор, используемый в магазине для расчёта состояния.

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

Аргументы

nextReducer (Функция) Следующий редуктор для использования магазином.