跳至主内容
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

createStore(reducer, preloadedState?, enhancer?)

创建一个承载应用完整状态树的 Redux store
应用中应仅存在单一 store。

危险

原生 Redux 核心方法 createStore 已弃用!

createStore 将无限期保持可用,但我们不推荐直接使用 createStore 或原始 redux 包。

请改用官方 Redux Toolkit 中的 configureStore 方法。该方法封装了 createStore,提供更优的默认设置和配置方案。同时建议使用 Redux Toolkit 的 createSlice 方法编写 reducer 逻辑。

Redux Toolkit 还会重新导出 redux 包中的所有其他 API。

有关如何将现有传统 Redux 代码迁移至 Redux Toolkit 的详细说明,请参阅迁移到现代 Redux页面。

参数

  1. reducer (函数): 根 reducer 函数,接收当前状态树和待处理的 action,返回下一状态树

  2. [preloadedState] (任意类型): 初始状态。可选指定该参数以在通用应用中从服务器注水状态,或还原先前序列化的用户会话。若通过 combineReducers 生成 reducer,则必须传入与键名结构相同的普通对象。否则可传递任何 reducer 能处理的格式

  3. [enhancer] (函数): store 增强器。可选指定该参数以通过中间件、时间旅行、持久化等第三方能力增强 store。Redux 内置的唯一增强器是 applyMiddleware()

返回值

(Store): 承载应用完整状态的对象。变更其状态的唯一方式是派发 action。也可订阅状态变更以更新 UI

示例

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 模式迁移至现代 Redux Toolkit API。导入和使用时会产生视觉删除线效果(如 createStore),但不会引发运行时错误或警告

createStore 将无限期保持可用,且永远不会被移除。但我们当前强烈建议所有 Redux 用户全面采用 Redux Toolkit 处理 Redux 逻辑

解决方案如下:

  • 遵循我们改用 Redux Toolkit 和 configureStore 的强烈建议

  • 不做任何更改。这仅是视觉上的删除线效果,不会影响代码行为。忽略即可。

  • 改用现在导出的 legacy_createStore API,这是完全相同的函数但没有 @deprecated 标记。最简单的方案是使用别名导入重命名,例如 import { legacy_createStore as createStore } from 'redux'

使用技巧

  • 不要在应用中创建多个 store!应使用 combineReducers 将多个 reducer 合并为单一根 reducer。

  • Redux 状态通常是普通的 JavaScript 对象和数组。

  • 若状态是普通对象,务必确保永不直接修改它!不可变更新需要对每层数据做拷贝,通常使用对象展开运算符(return { ...state, ...newData })。

  • 对于在服务端运行的通用应用,应为每个请求创建独立的 store 实例。向 store 实例派发数据获取操作,并在服务端渲染前等待其完成。

  • 创建 store 时,Redux 会向 reducer 派发虚拟操作以初始化状态。无需直接处理此操作,只需记住:当首个参数状态为 undefined 时,reducer 应返回某种初始状态。

  • 要应用多个 store 增强器,可使用 compose() 方法。