从零开始的react入门教程（十），快速上手react-redux，相对于redux它究竟简化了什么？
壹 ❀ 引
在前面两篇文章中，我们介绍了redux与context部分概念与基本用法，这里我们做个简单复习。
redux属于应用数据流框架，主要用于应用状态的管理，比如react中的state。其数据流为view-->action-->reducer-->store-->view，比如用户点击了一个按钮，本质触发的是store.dispatch(action)，然后reducer感知事件，触发actionType对应的更新数据方法，从而达到更新store的目的，而当store更新后，早在view订阅的store.subscribe又被触发，这样又通过store.getState拿到最新的store并将其设置为组件的state，state发生变化自然会让组件重新render，这便是一次完整的数据更新过程。
而随之问题也暴露出来了，多个组件需要使用store的数据都得引入store.js文件，而且dispatch以及subscribe等API都在store上，所以你需要使用这些方法的地方也一样得提前引入store。于是，我们紧接着介绍了context概念，context（上下文）的作用主要用于解决组件跨级传值问题，比如上面提到的API方法，我们就可以通过context.Provider的value将store传递下去，这样不管哪个组件都可以通过类似this.context.dispatch的写法调用store上的方法。除了全局传递外，比如A-->B-->C-->D场景，D需要拿到A的数据，但是又不希望BC作为数据传递的工具人，使用context.Consumer同样能解决这一类场景的问题。
接下来要介绍的react-redux是redux作者为react量身定制的库，使用上进一步简化了我们对于redux以及context的写法。由于react-redux是独立redux的存在，因此我们需要单独引入它。在项目根目录执行npm install --save react-redux，接下来我们来了解其在用法的变化，没关系，有前两篇文章的铺垫，这并不会很难！本文开始。
贰 ❀ react-redux
react-redux提供了Provider，connect，mapStateToProps与mapDispatchToProps四个API，我们来一一介绍它们。
贰 ❀ 壹 Provider
在之前context中我们使用Provider得先通过React.createContext()创建，不过有了react-redux后我们可以直接引用，比如：
import { Provider } from 'react-redux'
其用法与含义与之前完全相同，我们还是使用之前文章的例子，在index中做部分修改，将Provider的引用改为react-redux：
import React, { Component } from 'react';
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom';
import store from './Store.js';
import Counter from './Counter.js';
import Summary from './Summary.js';
class ControlPanel extends Component {
render() {
return (
<div>
<Counter caption="First" />
<Counter caption="Second" />
<hr />
<Summary />
</div>
);
}
}
ReactDOM.render(
<Provider value={store}>
<ControlPanel />
</Provider>,
document.getElementById('root')
);
注意，这次我们把Provider用在了ReactDOM.render中，也就是进行了真正意义上的全局包裹，之前文章的例子由于ControlPanel组件自身没有使用到store的数据，而是它的子组件需要用，所以之前的写法如下，也没有什么问题：
class ControlPanel extends Component {
render() {
return (
//我们使用了Provider包裹子组件，通过value传递store
<context.Provider value={store}>
<div>
<Counter caption="First" />
<Counter caption="Second" />
<hr />
<Summary />
</div>
</context.Provider>
);
}
}
ReactDOM.render(
<ControlPanel />,
document.getElementById('root')
);
这里只是做个写法纠正说明，并不是react-redux特性如此必须这么写，所以单独做个说明。保存后运行项目会报错，毕竟后续还有代码还没改完，我们先这样。
贰 ❀ 贰 connect
上面的代码修改，我们为全局上下文中添加了数据store，还记得在之前context介绍中如何使用上下文中的数据吗？两种方式，第一种是通过conponentName.contextType = context先为当前组件绑定上下文，之后在constructor中通过super(context)引入，之后就可以通过this.context访问上下文了，第二种方式通过Consumer中回调函数形参直接访问。
而在react-redux中我们通过connect方法帮助组件链接全局上下文，比如：
import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(component);
上面代码中component就是你当前创建的组件，由于这个组件没有与上下文扯上关系，所以这里我们使用connect帮助它链接全局store，其次connect接受两个参数，分别是mapStateToProps与mapDispatchToProps，有什么用我们后面再介绍。
这里我们补充一个概念，react-redux将组件分为UI组件与容器组件。UI组件很好理解，只负责view渲染，不管理state变化，不管理业务逻辑，也不使用redux的API，它所接受的一切数据方法均由props提供。
而所谓容器组件作用与UI组件互补，它的工作是负责state变更以及业务逻辑处理，而这里的容器组件其实由react-redux生成。
注意上面connect这行代码，它本质上等同于：
// 帮UI组件注入数据方法，于是得到了一个新的容器组件，connect就像给一部手机通了电一样，让其有了生命力
const 容器组件 = connect(mapStateToProps, mapDispatchToProps)(UI组件);
export 容器组件；
也就是说我们通过connect帮助一个UI组件链接到了数据层，这里的数据可以是全局的store，也可以是上层组件传递下来的props。于是我们得到了一个被注入了数据的新组件。
说到这里，不知道大家能不能感受到这种做法与context使用全局store的差异性，context使用数据要么直接把上下文与组件绑定后使用，要么借用Consumer使用，就像被内嵌进组件一样，耦合度较高。而connect更像在组件外部给其开了一个传递数据的入口，不管你数据哪里来的，都通过我这里传递进入，方式上就比较统一了，无论是全局store还是上次的props，都可以通过这里以props的方式统一注入，那么组件内部呢都给我通过props的方式访问外部传递进来的方法或者数据。
当然，上述关于UI组件的分类说明比较严格了，实际项目开发中也存在很多包含了业务代码以及自身state的组件使用connect链接store的做法。这里只是科普UI组件与容器组件的概念，有时候硬要将一个组件抽离成两个组件反而是一件麻烦事，具体看大家习惯。
上面说了connect用于帮助组件链接数据，那么具体做呢？其实就得依赖上面提到的两个参数了，我们接着说。
贰 ❀ 叁 mapStateToProps
顾名思义，建立state与props的映射，mapStateToProps接受2个参数，比如：
const mapStateToProps = (state,ownProps) => {
return {
name:state.name,
age:ownProps.age
}
}
说直白点，比如从全局的store（store本身可以理解为全局的state）以及外层组件传递给你的props中提取并组合成当前组件所需要的数据。
上面的代码中返回了一个新的对象，这个对象包含了一个name一个age，数据来源分别是全局state与外层组件传递的props，那么当前组件通过this.props即可访问到这两个属性，而且，无论是外部的state还是外部传递的ownProps发生了变化，都会再次触发此方法（如果你没用这两个参数就不会触发，毕竟没有依赖关系），目的是同步更新传递当前组件的props。
贰 ❀ 肆 mapDispatchToProps
看到方法名中的dispatch，直觉应该想到此方法应该跟store.dispatch有关。没错，我们在学习context时，凡是组件需要派发action时最终调用的都是this.context.dispatch，写法上多少有些繁琐。mapDispatchToProps的作用，其实也是将dispatch行为抽离了出去，然后也作为props一部分传进了组件，此方法接受两个参数，如下：
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
}
}
dispatch作用其实与store.dispatch作用相同，只是react-redux对齐进行了封装，我们不用再借用this.context.dispatch调用，而是可以直接在mapDispatchToProps方法中使用，是不是用法上便捷了很多呢？其次，mapDispatchToProps返回了一个对象，包含了一个方法，那么在当前组件内部，调用this.props.onIncrement本质上其实就是在做派发。
ownProps与mapStateToProps的第二个参数作用相同，都是外层组件组件传递的props。
叁 ❀ 一个例子
OK，我们介绍了react-redux带来的新概念，让我们使用这些API改写上一篇文章中的例子，近距离感受它们所带来的便捷性。在前面我们其实已经完成了对index.js的改写，接下来要做的是对Counter组件与Summary组件的改写，先上Counter.js的代码：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as Actions from './Actions.js';
import { connect } from 'react-redux'
class Counter extends Component {
render() {
const { onIncrement, onDecrement, caption, value } = this.props;
return (
<div>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
<span>{caption} count: {value}</span>
</div>
);
}
}
Counter.propTypes = {
caption: PropTypes.string.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired,
value: PropTypes.number.isRequired
};
// 用于将`store`的数据加工成当前组件所需要的数据
function mapStateToProps(state, ownProps) {
console.log(state);
console.log(ownProps);
return {
value: state[ownProps.caption]
}
}
// dispatch的操作都被提到这里了，组件瞬间就干净了
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
onDecrement: () => {
dispatch(Actions.decrement(ownProps.caption));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
这里我们尝试打印mapStateToProps两个参数，你会发现其实state就是全局store，ownProps就是父级组件传下来的props
你会发现，Counter组件活生生被抽离成了一个UI组件，以前我们还在组件中定义包裹dispatch的方法，定义初始化state的方法，还需要添加subscribe订阅store的变化，但现在，store的变化感知以及组件state的初始化都交给了mapStateToProps来完成，前面说了，只要外层state变化，都会触发此方法重新渲染。
同理，对于dispatch方法的定义我们也交给了mapDispatchToProps来完成，而组件内部只需要通过this.props.onIncrement就能执行action派发，是不是相对于之前的写法，简洁了很多呢？
同理，我们修改Summary组件，代码如下：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
class Summary extends Component {
render() {
const {sum} = this.props;
return (
<div>Total Count: {sum}</div>
);
}
}
Summary.propTypes = {
sum: PropTypes.number.isRequired
};
function mapStateToProps(state) {
let sum = 0;
for (const key in state) {
if (state.hasOwnProperty(key)) {
sum += state[key];
}
}
return {sum};
}
export default connect(mapStateToProps)(Summary);
保存代码，这个小例子又运行起来，相较于redux结合context的写法，react-redux确实很大程度上精简了代码量。
肆 ❀ 总
那么到这里，我们通过react-redux再次改写了之前的例子，通过这篇文章，我们知道react-redux与传统redux的差异性，从写代码的角度，不得不说react-redux更加的精简与方便。当然，redux其实还有不少进阶知识我们还未提及，比如中间件，比如异步处理，再或者对于reducer的合并等等，这些知识在后面的文章我们会慢慢介绍，那么本文到此结束。
参考
深入浅出React和Redux第三章
