Магазин

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

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

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

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

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

• getState()
• dispatch(action)
• subscribe(listener)
• replaceReducer(nextReducer)

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

getState()

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

Возвращает

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

dispatch(action)

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

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

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

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

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

Аргументы

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

Возвращает

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

Примечания

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

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

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

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

Пример

import { createStore } from 'redux'
let 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(listener)

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

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

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

2. Подписки «снимки» сразу перед каждым вызовом dispatch(). Если вы подписываетесь или отписываетесь во время вызова слушателей, это не повлияет на текущий вызов dispatch(). Однако следующий вызов dispatch(), будь то вложенный или нет, будет использовать более свежую «снимку» списка подписок.

3. Слушатель не должен ожидать увидеть все изменения состояния, так как состояние может быть обновлено несколько раз во время вложенного вызова dispatch() до вызова слушателя. Однако гарантируется, что все подписчики, зарегистрированные до начала dispatch(), будут вызваны с последним состоянием к моменту завершения вызова.

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

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

Аргументы

1. 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
    )
  }
}

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

replaceReducer(nextReducer)

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

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

Аргументы

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