createStore(reducer, [preloadedState], [enhancer])

Создает Redux хранилище которое хранит полное дерево состояния вашего приложения. Оно должно быть единственным хранилищем в вашем приложении.

Параметры

  1. reducer (Function): Функция редюсера которая возвращает следующее дерево состояния, принимая текущее состояние и действие к обработке.

  2. [preloadedState] (any): Начальное состояние. Вы можете дополнительно указать это для гидрирования состояния с сервера в универсальных приложениях или для восстановления предыдущей сериализированной сессии пользователя. Если вы создали редюсер с помощью combineReducers - это должно быть простым объектом с той же формой, как и ключи переданные ему. Иначе, вы можете передать все, что ваш редюсер может понять.

  3. [enhancer] (Function): Расширитель хранилища. Вы можете дополнительно указать это, чтобы расширить хранилище такими сторонними возможностями, как мидлвары (middleware), путешествия во времени, персистентность, и т.д. Единственный расширитель хранилища, который поставляется с Redux, это applyMiddleware().

Возвращает

(Store): объект, который содержит полное состояние вашего приложения. Единственный способ изменить его состояние — путем отправки действий. Вы можете также подписаться на изменения его состояния, чтобы обновить пользовательский интерфейс.

Пример

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

Советы

  • Не создавайте более одного хранилища в приложении! Вместо этого используйте combineReducers для создания единого корневого редюсера из нескольких.

  • Выбор формата состояния на ваше усмотрение. Можно использовать простые объекты или что-то вроде Immutable. Если вы не уверены, начните с простых объектов.

  • Если ваше состояние является простым объектом, убедитесь, что вы никогда его не изменяете! Например, вместо того, чтобы возвращать что-то вроде Object.assign (state, newData) из ваших редюсеров, возвращайте Object.assign ({}, state, newData). Таким образом, не переопределяется предыдущее состояние. Вы также можете написать return { ...state, ...newData } если вы включите object spread operator proposal.

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

  • Когда хранилище создано, Redux отправляет фиктивное действие для вашего редюсера, для заполнения хранилища с начальным состоянием. Вам не надо обрабатывать фиктивное действие напрямую. Просто помните, что ваш редюсер должен возвращать какое-то начальное состояние, если состояние переданное ему в качестве первого аргумента не определено (undefined) и все готово.

  • Чтобы использовать несколько расширителей хранилища вы можете использовать compose().

results matching ""

    No results matching ""