redux爬坑记

参考 http://www.w3ctech.com/topic/1561

[]http://www.tuicool.com/articles/vEnMFzz](这篇文章也不错源码注释挺清楚 帮助理解)

redux相比于Reflux和flux更像。

redux分为三部分：

actions, reducers, store

actions: 用来描述动作行为的，向store发送命令。例：

eat= (food) => {type: eat，food}

actions只是用来描述吃这个行为，必须有一个type来标识这个行为的类型，要改变store交给reducers

reducers:用来修改store的状态。reducer 就是一个纯函数，接收旧的 state（全局的） 和 action，返回新的 state。传入两个参数。例：

reducer = (state, action) =>{
switch (action.type) {
case EAT:
return action.food
default:              //一定要有
return state;
}
}

var rootReducer = combineReducer(reducer);

rootReducer总是返回新的state，不修改旧state，而是创建空对象，然后将 key/value 往上面挂载。只有在 reducers 对象上的 key 才会被迁移。

上面提到的 action 跟 reducer 函数，都是普通的纯函数。对于 action 函数 来说，输入相同的参数无限次，它的返回值也相同。而有了「不变值」，我们得到的好处是，在 react component 的 shouldComponentUpdate(nextProps, nextState) 里，可以直接拿当前 props 跟 nextProps 做 === 对比，如果相等，说明不用更新，如果不相等，则更新到视图。

如果不是返回新 state，只是修改旧 state，我们就很难做到「回退/撤销」以及跟踪全局状态。对比两个数据是否同一，也无法用 === ，而得用 deepEqual 深度遍历来对比值，很耗费性能。

store:代表的是数据模型，内部维护了一个state变量，用力描述应用的状态。

store有几个重要的方法：

let store = createStore(rootReducers, initialState);

getState:获取应用当前state

dispatch(action):分发action。修改state

而 dispatch 方法，是 store 对象提供的更改 currentState 这个闭包变量的唯一建议途径。注意，我是说唯一建议，不是说唯一途径，因为 getSate 拿到的是 currentState 的对象引用，我们还是可以在外头改动它，虽然不建议。

subscribe:监听action变化

replaceReducer:替换store当前用来处理state的reducer

常用的是dispatch，这是修改state的唯一途径

store.dispatch(eat('beef'));

//dispatch部分源码
function dispatch(action) {
// currentReducer 是当前的Reducer
function dispatch(action) {
// currentReducer 是当前的Reducer
currentState = currentReducer(currentState, action);
listeners.slice().forEach(function (listener) {
return listener();
});
return action;
}

关于Redux中的state：

State其实一直在Redux内部保存着。并且每次执行currentReducer都会更新。在上面代码第一行可以看到。

currentState = currentReducer(currentState, action);

注：个人理解是从reducer中获取的，在定义reducer的时候会传两个参数(state, action).

那redux整体流程就是：(编不下去了 捂脸)

我想吃东西(action)，想吃beef：store.dispatch(eat(‘beef’));

通知服务员(reducer),服务员根据你是吃东西(type:EAT)往菜单上记你想吃的菜、餐桌号等 (return{action.food,…state})

服务员通知后厨做牛肉并生成订单(修改state):我几号桌，想吃牛肉。

下面是重头戏：react-redux

关键词：Provider、connect、mapStateToProps、mapDispatchToProps

mapStateToProps:筛选state，返回给component。

mapStateToProps(state) => {
return eat:state.eat
}

mapDispatchToProps:把action放到props上

当它被connect调用的时候会为它传递一个参数dispatch。

mapDispatchToProps负责返回一个 dispatchProps

dispatchProps 是actionCreator的key和dispatch(action)的组合。

dispatchProps 看起来长这样：

{
addItem: (text) => dispatch(action)
}

connect 收到这样的数据后，会把它放到React组件上。然后子组件就可以通过props拿到addItem并且使用啦。

this.props.addItem('Hello World~');

如果觉得复杂，不好理解，，那我用大白话描述一下

就是通过mapDispatchToProps这个方法，把actionCreator变成方法赋值到props，每当调用这个方法，就会更新State。。。。额，，这么说应该好理解了。。

bindActionCreators:将Actions 和 dispatch 组合起来生成 mapDispatchToProps 需要生成的内容。

function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(createActions, dispatch)
}
}

connect:

export default connect(mapStateToProps, mapDispatchToProps)(Componnet)

两个变量的参数是store传的，store为什么能传这么远是因为Provider。

将筛选粗来的state和 action作为props添加到Component上。

Provider

Provider是一个React组件，它的作用是保存store给子组件中的connect使用。

通过getChildContext方法把store保存到context里。

后面connect中会通过context读取store。

它看起来是这个样子的：

<Provider store={this.props.store}>
<h1>Hello World!</h1>
</Provider>

这是一部分核心源码：

getChildContext() {
return { store: this.store }
}

constructor(props, context) {
super(props, context)
this.store = props.store
}

可以看到，先获取store，然后用 getChildContext 把store保存起来~

redux工作流程

actionCreator|reducer|combineReducers|createStore|bindActionCreators

设计全局 state 的数据结构

设计更改 state 数据的 actionTypes 常量以及其他跟视图展现相关的 actionTypes 常量

根据 actionTypes 常量，书写 actionCreator 。

根据各个 actionCreator 的返回值，涉及 reducer 做数据的最后处理

在有了 reducer 函数之后，createStore(reducer, initState) 得到 store 对象

用 bindActionCreators 函数将 actionCreators 和 store.dispatch 绑定起来，得到一组能修改全局状态的函数

分发各个状态修改函数到各个 DOM 事件中。