Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →
createStore(reducer, preloadedState?, enhancer?)
Создаёт Redux хранилище, содержащее полное дерево состояний вашего приложения. В приложении должно быть только одно хранилище.
Базовая функция createStore из Redux устарела!
createStore продолжит работать бесконечно, но мы не рекомендуем напрямую использовать createStore или оригинальный пакет redux.
Вместо этого используйте метод configureStore из официального пакета Redux Toolkit, который оборачивает createStore для более удобной настройки. Также используйте метод createSlice из Redux Toolkit для написания редьюсеров.
Redux Toolkit также реэкспортирует все остальные API из пакета redux.
Подробнее о миграции с устаревшего Redux смотрите на странице Переход на современный Redux.
Аргументы
-
reducer(Function): Корневая функция-редьюсер, возвращающая новое дерево состояний на основе текущего состояния и обрабатываемого действия. -
[
preloadedState] (any): Начальное состояние. Можно использовать для гидратации состояния с сервера в universal-приложениях или восстановления сессии. Еслиreducerсоздан черезcombineReducers, это должен быть простой объект с такой же структурой ключей. В остальных случаях можно передавать любой формат, который понимает вашreducer. -
[
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' ]
Устаревание и альтернативный экспорт legacy_createStore
В Redux 4.2.0 мы пометили оригинальный createStore как @deprecated. Строго говоря, это не критическое изменение, и оно не новое в 5.0, но мы документируем его здесь для полноты.
Это устаревание — лишь визуальный индикатор, призывающий перейти с устаревших подходов Redux на современные API Redux Toolkit. При импорте и использовании появится визуальное зачёркивание, как , но без ошибок или предупреждений в рантайме.createStore
createStore продолжит работать бесконечно и никогда не будет удалён. Но сегодня мы хотим, чтобы все пользователи Redux использовали Redux Toolkit для своей логики.
Есть три варианта действий:
-
Следуйте нашей рекомендации и перейдите на Redux Toolkit с
configureStore -
Ничего не делать. Это лишь визуальное зачёркивание, не влияющее на работу кода. Можно игнорировать.
-
Использовать API
legacy_createStore, который теперь экспортируется — это та же функция без пометки@deprecated. Простейший вариант — импортировать с псевдонимом:import { legacy_createStore as createStore } from 'redux'
Советы
-
Не создавайте несколько хранилищ в одном приложении! Вместо этого используйте
combineReducersдля создания корневого редюсера. -
Состояние в Redux обычно представлено обычными JS-объектами и массивами.
-
Если состояние — простой объект, никогда не изменяйте его напрямую! Для иммутабельных обновлений создавайте копии на каждом уровне, обычно используя оператор расширения (
return { ...state, ...newData }). -
Для универсальных приложений, работающих на сервере, создавайте экземпляр хранилища для каждого запроса, чтобы они были изолированы. Выполните действия для загрузки данных и дождитесь их завершения перед рендерингом.
-
При создании хранилища Redux диспатчит фиктивное действие для инициализации состояния. Ваш редюсер должен вернуть начальное состояние, если первый аргумент —
undefined. -
Для применения нескольких усилителей хранилища используйте
compose().