在大型项目中，如果完全使用react管理数据将会是一件很麻烦的事情。这一章，我们将介绍如何使用redux来管理你的应用状态。
Redux的基本原则
我们知道，react的数据都是“单向数据流”，即由父组件往子组件一层一层的传递。redux在此基础上又强调了三个基本原则：
- 唯一数据源
- 保持状态只读
- 数据改变只能通过纯函数完成
下面，让我们具体分析这三条基本原则:
唯一数据源
整个应用只有一个store，所有组件的数据源就是这个store上的状态。这句话怎么理解呢？比如，我们要做一个博客系统，这个博客系统只有用户信息模块和显示博客列表模块。那么，store上的状态应该像下面这样设计：
initState = {
userInfo: ...,
blogList: ...
}
initState.userInfo用来存储用户信息，initState.blogList用来存储博客信息。这样，我们就可以在一个store上存储所有的应用信息。
保持状态只读
不可直接修改状态，要通过派发一个action对象去完成修改。关于action，后面再做讲解。
数据改变只能通过纯函数完成
这里所说的純函数指的是就是reducer。那么何为純函数呢？純函数指的就是返回结果必须完全由参数决定，且不得修改参数值。
reducer只负责计算state，并不负责存储state。存储state的工作交给Redux框架去做。在这里，你只需要知道当我们派发了一个action后，redux会根据action的type值，在reducer找到对应的条件分支，然后去处理这个分支下的行为，state的计算就在这个条件分之下完成。
Redux实例
下面，我们将创建一个简单的计数器应用来讲解具体该如何使用redux。应用界面的渲染必须通过state或props的改变来触发，而state或props的改变是用户操作行为导致的结果。上面说过，要修改状态需要派发一个action，这个action的派发，就是用户行为导致的。
action
action顾名思义代表一个“动作”，不过这个动作是一个普通的javascript对象。action对象必须有一个名为type的字段，代表这个action对象的类型。比如，计数器有加减操作，那么action的type可定义为'increment'或'decrement'。
定义action通常需要两个文件，一个用于保存action的类型，一个用于创建action的构造函数。
在ActionTypes.js文件中，我们定义action的类型。
// ActionTypes.js
export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';
上面分别定义了用户的两个动作，加和减。
我们在actions.js中定义action的构造函数。注意，创建的是action构造函数，而不是action本身，action构造函数会返回一个action。
// Actions.js
import * as ActionTypes from './ActionTypes.js';
export const increment = (counterCaption) => {
return {
type: ActionTypes.INCREMENT,
counterCaption: counterCaption
};
};
export const decrement = (counterCaption) => {
return {
type: ActionTypes.DECREMENT,
counterCaption: counterCaption
};
};
store
action创建了之后，我们需要将它派发出去，以此来改变state。上面已经介绍过，state被存储在store，store提供dispatch()方法来派发action，dispatch接收action对象作为参数。
我们先创建一个store.js文件，输出全局唯一的那个store。
// Store.js
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方法来创建store。createStore方法接收两个参数，第一个参数代表更新状态的reducer，第二个参数是状态的初始值。关于createStore的具体用法，后面章节会介绍，这里只要知道这两个参数就行。
reducer
接下来创建reducer函数，reducer用于计算state。
// 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
}
}
在reducer函数中，根据action.type的判断条件来执行state的计算。上面的代码，我们使用了扩展运算符（...），不懂的同学自行补脑吧，在es6的课程有讲解。
记住：reducer中绝对不能直接修改state。因为reducer是一个純函数，純函数的返回结果完全由传入的参数决定，且不可修改参数值。 使用扩展运算符，实际上复制了一个state副本，操作的是这个副本，犹如jquery中$.extend()的用法。
view
接下来，我们看一下view部分。view中有三个组件，最外层的是ControlPanel组件。
// ControlPanel.js
class ControlPanel extends Component {
render() {
return (
<div style={style}>
<Counter caption="First"/>
<Counter caption="Second"/>
<Counter caption="Third"/>
<hr/>
<Summary/>
</div>
);
}
}
ControlPanel组件中包含Counter和Summary两个组件，这里主要介绍Counter组件的写法，Summary组件和Counter组件写法差不多。
首先初始化this.state
// Counter.js
class Counter extends Component {
constructor(props) {
super(props);
...
this.state = this.getOwnState();
}
getOwnState() {
return {
value: store.getState()[this.props.caption]
};
}
...
}
我们把从store上获取状态的逻辑放在getOwnState()方法中，store.getState()可获得当前状态，也就是我们在Store.js中定义的initValues。
为了保证store上的状态和this.state保持同步，需要监听store的变化。
onChange() {
this.setState(this.getOwnState());
}
componentDidMount() {
store.subscribe(this.onChange);
}
componentWillUnmount() {
store.unsubscribe(this.onChange);
}
在componentDidMount中。通过store.subscribe监听store变化，只要store发生变化，就会调用onChange方法；在componentWillUnmount函数中，我们把这个监听注销，和componentDidMount中的动作对应。
改变store中状态的唯一方法是派发一个action。如下：
// Counter.js
class Counter extends Component {
...
onIncrement() {
store.dispatch(Actions.increment(this.props.caption));
}
onDecrement() {
store.dispatch(Actions.decrement(this.props.caption));
}
...
render() {
const value = this.state.value;
const {caption} = this.props;
return (
<div>
<button style={buttonStyle} onClick={this.onIncrement}>+</button>
<button style={buttonStyle} onClick={this.onDecrement}>-</button>
<span>{caption} count: {value}</span>
</div>
);
}
}
store.dispatch()方法派发一个action后，redux会根据action的type值，查找在reducer函数中相符的判断条件来执行state的计算。