Магазин

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

Магазин — это объект, который объединяет их. Магазин выполняет следующие задачи:

• Хранит состояние приложения;
• Обеспечивает доступ к состоянию через getState();
• Разрешает обновление состояния через dispatch(action);
• Регистрирует слушателей через subscribe(listener);
• Обрабатывает отмену регистрации слушателей через функцию, возвращаемую subscribe(listener).

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

Создать магазин легко, если у вас есть редуктор. В предыдущем разделе мы использовали combineReducers() для объединения нескольких редукторов в один. Теперь мы импортируем его и передадим в createStore().

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

Вы можете указать начальное состояние в качестве второго аргумента функции createStore(). Это полезно для гидратации состояния клиента, чтобы оно соответствовало состоянию приложения Redux, работающего на сервере.

let store = createStore(todoApp, window.STATE_FROM_SERVER)

Отправка действий

Теперь, когда мы создали магазин, давайте проверим, работает ли наша программа! Даже без пользовательского интерфейса мы можем протестировать логику обновления.

import {
  addTodo,
  toggleTodo,
  setVisibilityFilter,
  VisibilityFilters
} from './actions'

// Log the initial state
console.log(store.getState())

// Every time the state changes, log it
// Note that subscribe() returns a function for unregistering the listener
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

// Dispatch some actions
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

// Stop listening to state updates
unsubscribe()

Вы можете увидеть, как это приводит к изменению состояния, хранящегося в магазине:

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

Исходный код

index.js

import { createStore } from 'redux'
import todoApp from './reducers'

let store = createStore(todoApp)

Следующие шаги

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