《深入浅出React和Redux》(2) - Redux
### Redux是Flux理念的一种实现。
关于Flux理念可以通过类比MVC模式来做简单理解。
MVC模式中，用户请求先到达Controller，由Controller调用Model获得数据，然后把数据交给View，按照这种模式，MVC应该也是一个controller->model->view的单向数据流，但是，在实际应用中，由于种种原因，往往会让view直接操作Model，随着应用的演进、逻辑变得越来约复杂，view与model之间的关系就会变得错综复杂、难以维护。**在MVC中让View和Model直接对话就是灾难**。
Flux理念可以简单看作是对MVC添加了更加严格的数据流限制。
Flux框架随React一同被Fackbook推出，但在Dan Abramov创建了Redux后，Redux已经替代了Flux。
### 基本原则
Flux的基本原则是“单向数据流”, Redux在此基础上强调三个基本原则：
- 唯一数据源（Single Source of Truth），应用的状态数据应该只存储在唯一的一个Store上，它是树形结构，每个组件往往只是用树形对象上一部分的数据，而如何设计Store上状态的结构，就是Redux应用的核心问题。
- 保持状态只读（State is read-only），不能直接修改store状态，必须要通过派发action对象的方式来进行。
- 数据改变只能通过纯函数完成（Changesare made with pure functions）。
这个纯函数就是Reducer, Dan Abramov说过，Redux名字的含义就是Reducer+Flux。Reducer是一个很多语言都支持的函数，下面是js中数组的reduce函数的用法：
[1,2,3,4].reduce(function reducer(accumulation, item){
return accumulation + item;
}, 0)
reduce函数的第一个参数是reducer, 这个函数把数组所有元素依次做“规约”，对每个元素都调用一次reducer，通过reducer函数完成规约所有元素的功能。
在Redux中，reducer的函数签名为：
reducer(state, action)
它根据state和action的值产生一个新的state对象返回，reducer是纯函数，只负责计算状态，不会去存储状态。
### Redux的使用
使用create-react-app创建的模版中不包含redux依赖，首先需要执行```npm install redux```安装。
MVC中标准的单向数据流为controller->model->view的，对应地，在React配合Redux后，要触发view的更新，需要发出一个action，然后reducer根据action来更新store的状态，最后让view根据store中最新的数据来更新。
#### Action
Redux应用习惯上把action类型和action构造函数分成两个文件定义，两者的内容类似这样：
**ActionTypes.js**
export const INCREMENT="increment";
export const DECREMENT="decrement";
**Actions.js**
这里的每个action构造函数都返回一个action对象
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
**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;
store的创建要调用Redux库提供的createStore函数：
- 第一个参数为reducer，它负责更新更新状态
- 第二个参数是状态的初始值
- 还有第三个参数为Store Enhancer，后面再了解
确定Store状态，是设计好Redux应用的关键，其主要原则是：**避免冗余的数据**；
#### Reducer
**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的主要结构就是if-else或switch语句，根据action.type来执行对应的reduce操作。
```...state```为扩展操作符语法，将state字段扩展开赋值给一个新的对象，再根据counterCaption修改对应的字段，这种简化写法等同于：
const newState = Object.assign({}, state);
newState[counterCaption]++;
return newState;
扩展操作符语法(spread operator)并不是ES6语法，但因其语法简单而被广泛使用，babel会负责解决兼容性问题。
reducer是纯函数，不会修改原有的state，而是操作新复制的state。
### View
view代码举例：
import { Component } from 'react';
import PropTypes from 'prop-types';
import store from '../Store.js';
import * as Actions from '../Actions.js'
class Counter extends Component {
constructor(props) {
super(props);
/* bind methods*/
this.state = this.getOwnState();
}
getOwnState() {
return {
value: store.getState()[this.props.caption]
}
}
onChange() {
this.setState(this.getOwnState());
}
onClickIncrementButton() {
store.dispatch(Actions.increment(this.props.caption));
}
onClickDecrementButton() {
store.dispatch(Actions.decrement(this.props.caption));
}
componentDidMount() {
store.subscribe(this.onChange);
}
componentWillUnmount() {
store.unsubscribe(this.onChange);
}
render() {
const { caption } = this.props;
const value = this.state.value;
return (
<div>
<button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
<button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
<span>{caption} count:{value}</span>
</div>
);
}
}
- ```store.getState()```获取store上存储的所有状态，当前组件只需要获取自身相关的状态信息；
- componentDidMount中，通过store.subscribe监听store状态的变化；
store状态变化时，触发onChange，在这里会调用```this.setState```触发view更新；
- 此外还要在componentWillUnmount中取消对store状态变化的监听；
- 点击button时，通过store.dispatch分发一个action，这个action由Actions.js中的某个action构造函数产生。
### 容器组件和展示组件
从前文的Redux示例代码可以发现，在Redux框架下，一个React组件基本上就是要完成以下两个功能：
- 与store相关的职责：
- 读取并监听Store状态的改变；
- 当Store状态变化时，更新组件状态，驱动组件重新渲染；
- 当需要更新Store状态时，派发action对象；
- 根据当前props和state，渲染出用户界面。
于是考虑将组件一分为二：
- 容器组件：承担store相关职责
- 展示组件：只关注页面渲染
展示组件没有状态，是一个纯函数，只需要根据props来渲染，不需要包含state；
### 组件Context
但是如果每个组件都拆分为容器组件和展示组件后，由于容器组件要与store打交道，那么每个容器组件都需要导入store，最好能只在顶层的组件导入一次，子组件就都可以用了，不过子组件使用时不是使用props层层传递，而是借助React提供的Context（上下文环境）。
要使用Context需要上下级组件之间的配合，首先来看顶层组件。
在此创建一个Provider组件作为一个通用的Context提供者
import { Component } from 'react';
import PropTypes from 'prop-types';
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: PropTypes.object
}
Provider.propTypes = {
store: PropTypes.object.isRequired
}
export default Provider;
这个组件作为父组件使用：
···
import store from './Store.js';
import Provider from './Provider.js';
ReactDOM.render(
document.getElementById('root')
);
顶层的Provider组件，通过```Provider.childContextTypes```来宣称自己支持context，并且提供```getChildContext```函数来返回代表Context的对象，Context对象中存储的值实际上是index.js导入的store，作为props传递给了Provider。这样就实现了只在index.js导入store一次。
Provider组件还会通过```this.props.children```把子组件渲染出来。
然后它子孙组件，只要宣称自己需要这个context，就可以通过this.context访问到这个共同的环境对象。就像这样：
SummaryContainer.contextTypes = {
store: PropTypes.object
}
另外，构造函数也要传递context：
constructor(props, context) {
super(props, context);
···
}
这里可以进一步简化为：
constructor() {
super(...arguments);
···
}
### React-Redux
以上过程从两个方面改进了React应用：
- 把组件拆分为容器组件和展示组件
- 所有组件都通过Context来访问store
实际上使用react-redux库可以代替上面的大部分工作了，不过通过前面一步步的改进过程可以了解其中的原理。
引入react-redux后，代码相比之前会更加简洁。
首先在index.js修改为从react-redux导入Provider：
import {Provider} from 'react-redux';
在子组件中，容器组件部分也交给react-redux来创建，我们只需编写展示组件部分，并定义好mapStateToProps和mapDispatchToProps。
之前在容器组件有定义getOwnState方法，将store上的状态转化为展示组件的props
getOwnState() {
return {
value: this.context.store.getState()[this.props.caption]
}
}
mapStateToProps也是同样的作用：
function mapStateToProps(state, ownProps) {
return {
value: state[ownProps.caption]
}
}
容器组件还定义了点击是分发action的函数，
onClickIncrementButton() {
this.context.store.dispatch(Actions.increment(this.props.caption));
}
onClickDecrementButton() {
this.context.store.dispatch(Actions.decrement(this.props.caption));
}
mapDispatchToProps的也是同样的作用，将dispatch传递给展示组件的props，供其主动触发：
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
onDecrement: () => {
dispatch(Actions.decrement(ownProps.caption));
}
}
}
mapStateToProps和mapDispatchToProps会作为参数传递给react-redux的connect
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
connect函数的运行结果还是一个函数，然后把展示组件Counter作为参数调用这个函数，这个过程就类似于之前的容器组件嵌套展示组件。
### 参考书籍
《深入浅出React和Redux》 程墨
