ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
# Store 上面章节中,我们学会了使用 [action](#) 来描述“发生了什么”,和使用 [reducers](#) 来根据 action 更新 state 的用法。 **Store** 就是把它们联系到一起的对象。Store 有以下职责: - 维持应用的 state; - 提供 [`getState()`](#) 方法获取 state; - 提供 [`dispatch(action)`](#) 方法更新 state; - 通过 [`subscribe(listener)`](#) 注册监听器。 再次强调一下 **Redux 应用只有一个单一的 store**。当需要拆分处理数据的逻辑时,使用 [reducer 组合](#) 而不是创建多个 store。 根据 reducer 创建 store 非常容易。例如,假如应用中只有一个 `todoApp` 的 reducer,可以这样写: ~~~ import { createStore } from 'redux'; import todoApp from './reducers'; let store = createStore(todoApp); ~~~ 为了提高可维护性,拆分成多个 reducer,这时需要使用 [`combineReducers()`](#) 来把它们组合起来。 ~~~ import { combineReducers, createStore } from 'redux'; import * as reducers from './reducers'; let todoApp = combineReducers(reducers); let store = createStore(todoApp); ~~~ [`createStore()`](#) 的第二个参数可以设置初始状态。这对开发同构应用时非常有用,可以用于把服务器端生成的 state 转变后在浏览器端传给应用。 ~~~ let store = createStore(todoApp, window.STATE_FROM_SERVER); ~~~ ### 发起 Actions 创建好了 store 后,就可以验证程序是否工作。虽然还没有界面,我们已经可以测试更新逻辑了。 ~~~ import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from './actions'; // 打印初始状态 console.log(store.getState()); // 监听 state 更新时,打印日志 let unsubscribe = store.subscribe(() => console.log(store.getState()) ); // 发起一系列 action store.dispatch(addTodo('Learn about actions')); store.dispatch(addTodo('Learn about reducers')); store.dispatch(addTodo('Learn about store')); store.dispatch(completeTodo(0)); store.dispatch(completeTodo(1)); store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED)); // 停止监听 state 更新 unsubscribe(); ~~~ 可以看到 store 里的 state 是如何变化的: ![](https://box.kancloud.cn/2015-11-19_564dae5bb7f45.png) 可以看到,在还没有开发界面的时候,我们就可以定义程序的行为。而且这时候已经可以写 reducer 和 action 创建函数的测试。不需要模拟任何东西,因为它们都是纯函数。只需调用一下,对返回值做断言,写测试就是这么简单。 ### 源码 #### `index.js` ~~~ import { combineReducers, createStore } from 'redux'; import * as reducers from './reducers'; let todoApp = combineReducers(reducers); let store = createStore(todoApp); ~~~ ### 下一步 在创建 todo 应用界面之前,我们先穿插学习一下[数据在 Redux 应用中如何流动的](#)。