在上篇文章中，我们用 React 结合 Redux 实现了一个小计算器，并将组件拆分为容器组件和木偶组件，本文再基于这个例子继续做一些拓展，并最终引出 React-Redux。

计算器应用的问题

对于计算器小应用，我们已经实现了其所有的功能，因此不再有功能上的问题了，那么还有没有可以优化的地方呢？当然。
在这个例子中，每个容器组件都会引入 store，这样会产生两个问题：

• 每个容器组件都去引入 store，有点麻烦
• 如果我们要写一个插件提供给别人使用，但是并不知道别人的 store 的引用路径，这就有点难办了

或许你会想：如果有个全局变量就好了，将 store 存放在全局变量中，就不用每次都引入了，也不用关心 store 的引用路径了。
那么可不可以提供一个最外层的组件，让其提供 store 对象，然后子组件直接去取用这个对象呢？当然可以。这里就需要用到我们前面说过的 context，可以在这篇文章中查看相应的内容。

context 回顾

context 是组件树上的一个全局属性，这里先回顾一下 context 的使用：

• 父级需要声明自己支持 context，并提供一个 getChildContext 函数返回初始 context
• 子组件需要声明自己需要使用 context
• 子组件取用 context 中的属性时，属性验证（PropTypes）必须和父组件中的声明保持一致
• 若子组件拥有构造函数（constructor），需要将 context 传入该构造函数，并在 super 调用父类构造函数时一并传入
• 可以使用 super(...args) 来代替 super(props,context)

定义 Provider 组件

下面，我们来定义一个 Provider 组件，用来在 context 中存放 store 对象，新建一个 Provider.js 文件：

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class Provider extends Component{
    // 声明 context 属性的类型
    static childContextTypes = {
        store:PropTypes.object.isRequired,
    }

    // 返回初始的 context
    getChildContext(){
        return{
            // store 对象由 Provider 组建的 props 传入
            store:this.props.store,
        }
    }

    render(){
        // 直接渲染子节点
        return this.props.children;
    }
}

修改 App.js，让 Provider 作为组件树的根节点，并向其传入 store：

import React,{ Component } from "react";
import Counter from "./ContainerCounter";
import Provider from "./Provider";
import store from "./Store/store";

export default class App extends Component{
    render(){
        return(
            <Provider store = { store }>
                <Counter />
            </Provider>
        );
    }
}

修改 ContainerCounter.js，从 context 中获取 store：

import React,{ Component } from "react";
import PropTypes from "prop-types";
import ACTIONS from "./Store/actions";
import UICounter from "./UICounter";

export default class ContainerCounter extends Component{
    // 声明自己需要取用 context 属性
    static contextTypes = {
        store:PropTypes.object.isRequired,
    }

    constructor(props,context) {
        super(props,context);
        // 获取初始状态
        this.state = {
            // 使用 this.context.store 代替原先的 store
            value:this.context.store.getState().value,
        };
    }

    componentWillMount() {
        // 监听 store 变化
        this.context.store.subscribe(this.watchStore.bind(this));
    }

    componentWillUnmount() {
        // 对 store 变化取消监听
        this.context.store.unsubscribe(this.watchStore.bind(this));
    }

    // 监听回调函数，当 store 变化后执行
    watchStore(){
        // 回调函数中重新设置状态
        this.setState(this.getCurrentState());
    }

    // 从 store 中获取状态
    getCurrentState(){
        return{
            value:this.context.store.getState().value,
        }
    }

    // 增加函数
    increase(){
        // 派发 INCREMENT Action
        this.context.store.dispatch(ACTIONS.increament());
    }

    // 减少函数
    decrease(){
        // 派发 DECREAMENT Action
        this.context.store.dispatch(ACTIONS.decreament());
    }

    render(){
        return(
            <UICounter
                increase = { this.increase.bind(this)}
                decrease = { this.decrease.bind(this)}
                value = { this.state.value }
            />
        );
    }
}

效果和原先保持一致：

利用 context 获取 store.gif

使用 React-Redux

通过前面的例子，我们对应用进行了如下改进：

• 将组件拆分为容器组件和木偶组件
• 使用 Provider 顶层组件，通过 context 提供 store

前面说到，Redux 作为一款状态管理工具，可以和任意的框架结合使用，当然，还有一个更加适用于 React 开发的 React-Redux 库。其所作的工作和我们前面的差不多，但增加了不少的易用性。使用 React-Redux 前需要先进行安装：

npm install --save react-redux

下面说一下 React-Redux 库中的两个概念：

• connect：用来连接木偶组件，并转换为容器组件，是的，我们不需要自己写容器组件了
• Provider 组件：顶层组件，通过 context 提供 store

connect 函数接受两个参数，这两个参数都是函数：

• mapStateToProps：从 store 中获取值，并传递给木偶组件
• mapDispatchToProps：定义回调函数，并将这些回调函数传递给木偶组件，木偶组件调用通过这些函数向 store 派发 action

下面看一下代码实现：
App.js：

import React,{ Component } from "react";
import Counter from "./ContainerCounter";
// 从 react-redux 中引入 Provider 组件
import { Provider } from "react-redux";
import store from "./Store/store";

export default class App extends Component{
    render(){
        return(
            <Provider store = { store }>
                <Counter />
            </Provider>
        );
    }
}

ContainerCounter.js：

import { connect } from "react-redux";
import ACTIONS from "./Store/actions";
import UICounter from "./UICounter";

function mapStateToProps(state){
    return{
        value:state.value
    }
}

function mapDispatchToProps(dispatch){
    return{
        // 增加
        increase(){
            // 派发 action
            dispatch(ACTIONS.increament());
        },
        // 减少
        decrease(){
            dispatch(ACTIONS.decreament());
        }
    }
}

const ContainerCounter = connect(
    mapStateToProps,
    mapDispatchToProps,
)(UICounter);

export default ContainerCounter;

最终效果和前面一样。
可见，使用 react-redux 后，逻辑变得更加清晰了，也减少了许多操作，比如对 store 进行监听（subscribe），声明子组件的 context 等。这些事情 react-redux 都帮我们做了，我们只需定义两个函数（mapStateToProps，mapDispatchToProps）传递给 connect 函数，connect 函数调用的结果也是一个函数，我们再将木偶组件传入这个结果函数，就自动生成了容器组件。更易维护，代码量更少。
除此之外，react-redux 还进行了一些优化的处理，比如 shouldComponentUpdate 的优化等，但核心原理没有变，只是进行了一层封装处理。
因此，在使用 react-redux 之前，最好对 Redux 有一些了解，否则会因为不清楚内部的原理而成为代码搬运工。

总结

本文首先从全局 store 入手，构造了 Redux 版本的 Provider 组件，在此基础上引入了更加方便的 react-redux 库，更加适用于 React 开发，提升了开发效率和项目的可维护性。

完。