标签：for format 视图 list exp orm 响应 ret 数据源
一、react做视图层面，redux管理state，两者搭配。redux试图让state的变化变得可预测。
二、redux三大原则
1.单一数据源
整个应用的state被存储在一棵object tree，这个object tree只存在唯一一个store
2.state是只读的
唯一改变state的方法是触发action
3.使用纯函数来执行修改
reducers接收state和action，返回新state
二、开发redux应用重要的三件事
1.代码文件的组织结构
按功能组织
每个功能对应一个功能模块，一个文件夹
每个功能模块包括
actionTypes.js定义action类型
actions.js定义action的构造函数
reducer.js定义这个功能模块如何响应actions.js中定义的动作
views react组件 视图层
index.js 把所有角色导入，然后统一导出
2.确定模块边界
用index.js做为功能模块对外的接口
3.store的状态树设计
一个模块控制一个状态节点
避免冗余数据
树形结构扁平 树形结构层次不要太深
三、redux如何管理state
注册store tree
1.redux通过全局唯一的store对象管理项目中的state
//注册store redux通过全局唯一的store来管理state
const store = createStore(counter)
2.通过store注册listener,listener会在store tree每次变更后执行
//store‘s listener
//if store change ,it performance
store.subscribe(render)
更新store tree
1.store调用dispatch,通过action把变更的信息传递给reducer
//store.dispatch transform change information to reducer
onIncrement={() => store.dispatch({ type: ‘INCREMENT‘ })}
2.store根据action携带的type在reducer中查询变更具体要执行的方法，执行后返回新的state
//according to the action.type,store change state,then return
export default (state = 0, action) => {
switch (action.type) {
case ‘INCREMENT‘:
return state + 1
case ‘DECREMENT‘:
return state - 1
default:
return state
}
}
3.reducer执行后返回的新状态会更新到store tree中，触发由store.subscribe()注册的所有linstener
store.subscribe(render)
store.subscribe(()=>{
console.log(1);
})
参考：
《深入浅出React和Redux》程墨
https://www.cnblogs.com/hhhyaaon/p/5860159.html
redux入门
标签：for format 视图 list exp orm 响应 ret 数据源
原文地址：http://www.cnblogs.com/cdx0/p/redux_base.html
