单向数据流框架的始祖Flux
Flux理念的一个更强实现Redux
结合React和Redux
认识Flux
flux框架贯彻的最重要的观点 - 单向数据流
实际上Flux和React同时面世的。在2013年，Face-book公司让React亮相的同事，也推出了Flux框架。react和flux相辅相成。
做一个容易理解的对比，react是用来替代jquery的。那么flux就是替换backbone.js 、Ember.js等MVC框架为目的的。
对于MVC框架，为了让数据流可控，Controller应该是中心，当view要传递消息给Model时，应该调用Controller的方法，同样，当Model要更新view时，也应该通过controller引发新的渲染。
Flux的不足
- 1.Store之间依赖关系
- 2.难以进行服务器端渲染
- 3.Store混杂了逻辑和状态
Redux的基本原则
Flux的基本原则是“单向数据流”、Redux在此基础上强调三个基本原则
- 唯一数据源
- 保持状态只读
- 数据改变只能通过纯函数完成
逐一理解三条基本原则
唯一数据源
唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。从Flux来说，flux应用可以拥有多个Store、往往根据功能把应用的状态数据划分给诺干个Store分别存储管理。如果状态数据分散在多个Store中。容易造成数据冗余，这样数据一致性方面就会出现问题。
Redux对这个问题的解决方法就是，整个应用只保持一个Store、所有组件的数据源就是这个Store上的状态。
保持状态只读
保持状态只读，就是说不能去直接修改状态（setState），要修改Store的状态，必须要通过派发一个action对象完成。
UI=render(state) .(这个react公式)
我们已经说过驱动用户界面更改的是状态，如果状态都是只读的不能修改，怎么可能引起用户界面的变化呢？
当然，要驱动用户界面渲染，就要改变应用的状态，但是改变状态的方法不是去修改状态上值。而是创建一个新的状态对象返回给Redux。由Redux完成新的状态的组装。
这就直接引出了下面的第三个基本原则。
数据改变只能通过纯函数完成
这里所说的纯函数，就是Reducer，Redux名字的含义就是Reducer + Flux
Reducer不是一个Redux特定的术语，而是一个计算机科学中的通用概念，很多语言和框架都有对Reducer函数的支持。
我们以js为例。数据类型就有reduce函数，接受的参数就是一个reducer、reduce做的事情就是吧数组所有元素一次做“规约”，对每个元素都调用一次参数reducer、通过reducer函数完成规约所有元素的功能。
var array = [1,2,3,4]
function func(){
array.reduce(function reducer(acc,item){
console.log(acc+item);
return acc+item;
},0)
}
func();
上面的结果是 1 ，3， 6， 10
在Redux中，每个reducer的函数签名如下所示：
reducer(state,action)
第一个参数state是当前状态，第二个参数action是接受到的action对象。而reducer函数要做的事情，就是根据state 和 action的值产生一个新的对象返回，注意reducer必须是纯函数，也就是说函数的返回结果必须完全由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象。
在redux中，一个实现reducer代码如下：
function reducer( state, action) => {
const {counterCaption} = action;
switch (action. type) {
case ActionTypes. INCREMENT:
return {...state, [counterCaption]: state[ counterCaption] + 1};
case ActionTypes. DECREMENT:
return {...state, [counterCaption]: state[ counterCaption] - 1};
default: return state
}
}
可以看到reducer函数不光接受action为参数，还接受state未参数。也就是说，redux的reducer只负责计算状态，却并不负责存储状态。
我们可以看src/Actions.js文件中
export const increment = (counterCaption) => {
return {
type: ActionTypes.INCREMENT,
counterCaption: counterCaption
};
};
export const decrement = (counterCaption) => {
return {
type: ActionTypes.DECREMENT,
counterCaption: counterCaption
};
};
和Flux的src/Actions.js文件对比就会发现，Redux中每个action构造函数都返回一个action对象，而Flux版本中action构造函数，并不返回什么。而是把构造的动作函数立刻通过调用Dispatcher的dispatch函数派发出去
因为redux一般来说只有一个store。
import {createStore} from 'redux';
import reducer from './Reducer.js';
const initValues = {
'First': 0,
'Second': 10,
'Third': 20
};
const store = createStore(reducer, initValues);
export default store;
在这里，我们接触到了Redux库提供的createStore函数。
这里第一个参数代表 reducer，第二个参数是状态的初始值，第三个参数可选，代表Store Enhancer。
确定好store状态，是设计好Redux应用的关键。
Redux的Store状态设计的一个主要原则：避免冗余
src/Reducer.js
import * as ActionTypes from './ActionTypes.js';
export default (state, action) => {
const {counterCaption} = action;
switch (action.type) {
case ActionTypes.INCREMENT:
return {...state, [counterCaption]: state[counterCaption] + 1};
case ActionTypes.DECREMENT:
return {...state, [counterCaption]: state[counterCaption] - 1};
default:
return state
}
}
这里
return {...state, [counterCaption]: state[counterCaption] - 1};
其实，等同于下面的代码
const newState = Object.assign({},state);
newState[counterCaption]++;
return newState;
像上面这样写，创造了一个newState完全赋值了state、通过对newState的修改避免了对state的修改、不过这样写显得冗长、推荐使用扩展操作符，看起来更清晰简洁。
在reducer中绝对不能直接操作state
在View中的应用
接下来我们来看View部分：
-
首先我来看Counter.js
在构造函数里，我们应该要注意
this.state = this.getOwnState();而getOwnState()函数，是通过store.getState()这个API得来的。因此，在方法中。我们可以这样写
getOwnState() { return { value: store.getState()[this.props.caption] }; }在onChange函数中，我们不直接改变state，而是通过，改变，getOwnState()来改变响应的值。
onChange() { this.setState(this.getOwnState()); }在Counter中。我们可以看出ComponentDidMount中可以发现，subscribe监听其变化，只要Store的状态发生变化，就会调用这个组件的onChange的方法，在ComponentWillunmount中，我们可以将这个方法卸载掉。
componentDidMount() { store.subscribe(this.onChange); } componentWillUnmount() { store.unsubscribe(this.onChange); }至于加和减的方法，我们不难可以看到。在redux中，action只负责创建一个对象，要派发action就需要调用store.dispatch函数。
组件render函数所显示的内容，要么来自于props，要么来自于自身状态。
-
其次我们来看Summary.js
我们并没有状态来支持Summary组件，因为Summary组件的状态，完全可以通过把Counter状态数值加在一起得到，没有必须制造龙域数据存储。这也符合Redux唯一数据源的基本原则。
getOwnState(){ const state = store.getState(); let sum = 0; for(let key in state){ if(state.hasOwnProperty(key)){ sum+=state[key] } } return {sum : sum} }所以需要在getOwn-State状态中自己计算出所有计数值总和出来。
-
最后我们看ControlPanel.js
一个容器组件，装下Counter和Summary 就可以。
class ControlPanel extends Component {
render() {
return (
<div style={style}>
<Counter caption="First" />
<Counter caption="Second" />
<Counter caption="Third" />
<hr/>
<Summary />
</div>
);
}
}
参考文献
作者：程墨. 深入浅出React和Redux (实战) 北京华章图文信息有限公司. Kindle 版本.
