createStore(reducer, [preloadedState], [enhancer])
Создает Redux стор которое хранит полное дерево состояния вашего приложения. Оно должно быть единственным стором в вашем приложении.
Параметры
reducer
(Function): Функция редюсера которая возвращает следующее дерево состояния, принимая текущее состояние и экшен к обработке.[
preloadedState
] (any): Начальное состояние. Вы можете дополнительно указать это для гидрирования состояния с сервера в универсальных приложениях или для восстановления предыдущей сериализированной сессии пользователя. Если вы создалиредюсер
с помощьюcombineReducers
- это должно быть простым объектом с той же формой, как и ключи переданные ему. Иначе, вы можете передать все, что вашредюсер
может понять.[
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()
.