redux Store
在前面的章节中,我们学会了使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。
Store 就是把它们联系到一起的对象。Store 有以下职责:
1维持应用的 state;
2提供 getState() 方法获取 state;
3提供 dispatch(action) 方法更新 state;
4通过 subscribe(listener) 注册监听器;
5通过 subscribe(listener) 返回的函数注销监听器。
根据已有的 reducer 来创建 store 是非常容易的。在前一个章节中,我们使用 combineReducers() 将多个 reducer 合并成为一个。现在我们将其导入,并传递 createStore()。
import {createStore } from 'redux'import todoApp from './reducers'let store = createStore(todoApp)
发起 Actions
import {addTodo,toggleTodo,setVisibilityFilter,VisibilityFilters} from './actions'// 打印初始状态console.log(store.getState())// 每次 state 更新时,打印日志// 注意 subscribe() 返回一个函数用来注销监听器const unsubscribe = store.subscribe(() => console.log(store.getState()))// 发起一系列 actionstore.dispatch(addTodo('Learn about actions'))store.dispatch(addTodo('Learn about reducers'))store.dispatch(addTodo('Learn about store'))store.dispatch(toggleTodo(0))store.dispatch(toggleTodo(1))store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))// 停止监听 state 更新unsubscribe()