Redux总结3:store

来源:互联网 发布:长沙黑马程序员怎么样 编辑:程序博客网 时间:2024/04/28 04:00

我们学会了使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。而Store 就是把它们联系到一起的对象。

首先要区分 store 和 state
state 是应用的状态,一般本质上是一个普通对象
例如,我们有一个 Web APP,包含 计数器 和 待办事项 两大功能
那么我们可以为该应用设计出对应的存储数据结构(应用初始状态):

/** 应用初始 state,本代码块记为 code-1 **/{  counter: 0,  todos: []}

store 是应用状态 state 的管理者,包含下列四个函数:

getState() # 获取整个 statedispatch(action) #更新 state,是触发 state 改变的唯一途径subscribe(listener) #  注册监听器,可理解成是 DOM 中的 addEventListener通过 subscribe(listener) 返回的函数注销监听器

二者的关系是:state = store.getState()

Redux 规定,一个应用只应有一个单一的 store,其管理着唯一的应用状态 state
Redux 还规定,不能直接修改应用的状态 state,也就是说,下面的行为是不允许的:

var state = store.getState()state.counter = state.counter + 1 // 禁止在业务逻辑中直接修改 state

若要改变 state,必须 dispatch 一个 action,这是修改应用状态的不二法门

store.dispatch(addTodo('Learn about actions'))

上面提到,state 是通过 store.getState() 获取,那么 store 又是怎么来的呢?
想生成一个 store,我们需要调用 Redux 的 createStore:

import { createStore } from 'redux'...const store = createStore(reducer, initialState) // store 是靠传入 reducer 生成的!

createStore() 的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用,服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。

let store = createStore(todoApp, window.STATE_FROM_SERVER)
原创粉丝点击