React-redux: React.js 和 Redux 架构的结合

通过Redux 架构理解我们了解到 Redux 架构的 store、action、reducers 这些基本概念和工作流程。我们也知道了 Redux 这种架构模式可以和其他的前端库组合使用，而 React-redux 正是把 Redux 这种架构模式和 React.js 结合起来的一个库。

Context

在 React 应用中，数据是通过 props 属性自上而下进行传递的。如果我们应用中的有很多组件需要共用同一个数据状态，可以通过状态提升的思路，将共同状态提升到它们的公共父组件上面。但是我们知道这样做是非常繁琐的，而且代码也是难以维护的。这时会考虑使用 Context，Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。也就是说在一个组件如果设置了 context，那么它的子组件都可以直接访问到里面的内容，而不用通过中间组件逐级传递，就像一个全局变量一样。

在 App -> Toolbar -> ThemedButton 使用 props 属性传递 theme，Toolbar 作为中间组件将 theme 从 App 组件 传递给 ThemedButton 组件。

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
  // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
  // 因为必须将这个值层层传递所有组件。
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

使用 context，就可以避免通过中间元素传递 props 了

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

虽然解决了状态传递的问题却引入了 2 个新的问题。

1. 我们引入的 context 就像全局变量一样，里面的数据可以被子组件随意更改，可能会导致程序不可预测的运行。

2. context 极大地增强了组件之间的耦合性，使得组件的复用性变差，比如 ThemedButton 组件因为依赖了 context 的数据导致复用性变差。

我们知道，redux 不正是提供了管理共享状态的能力嘛，我们只要通过 redux 来管理 context 就可以啦，第一个问题就可以解决了。

Provider 组件

React-Redux 提供 Provider  组件，利用了 react 的 context 特性，将 store 放在了 context 里面，使得该组件下面的所有组件都能直接访问到 store。大致实现如下：

class Provider extends Component {
  // getChildContext 这个方法就是设置 context 的过程，它返回的对象就是 context，所有的子组件都可以访问到这个对象
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: React.PropTypes.object
}

那么我们可以这么使用，将 Provider 组件作为根组件将我们的应用包裹起来，那么整个应用的组件都可以访问到里面的数据了

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import todoApp from './reducers';
import App from './components/App';

const store = createStore(todoApp);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

展示（Dumb Components）组件和容器（Smart Components）组件

还记得我们的第二个问题吗？组件因为 context 的侵入而变得不可复用。React-Redux 为了解决这个问题，将所有组件分成两大类：展示组件和容器组件。

展示组件

展示组件有几个特征

1. 组件只负责 UI 的展示，没有任何业务逻辑

2. 组件没有状态，即不使用 this.state

3. 组件的数据只由 props 决定

4. 组件不使用任何 Redux 的 API

展示组件就和纯函数一样，返回结果只依赖于它的参数，并且在执行过程里面没有副作用，让人觉得非常的靠谱，可以放心的使用。

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

class Title extends Component {
  static propTypes = {
    title: PropTypes.string
  }

  render () {
    return (
      <h1>{ this.props.title }</h1>
    )
  }
}

像这个 Title 组件就是一个展示组件，组件的结果完全由外部传入的 title 属性决定。

容器组件

容器组件的特征则相反

1. 组件负责管理数据和业务逻辑，不负责 UI 展示

2. 组件带有内部状态

3. 组件的数据从 Redux state 获取

4. 使用 Redux 的 API

你可以直接使用 store.subscribe() 来手写容器组件，但是不建议这么做,因为这样无法使用 React-redux 带来的性能优化。

React-redux 规定，所有的展示组件都由用户提供，容器组件则是由 React-Redux 的 connect() 自动生成。

高阶组件 Connect

React-redux 提供 connect  方法，可以将我们定义的展示组件生成容器组件。connect 函数接受一个展示组件参数，最后会返回另一个容器组件回来。所以 connect 其实是一个高阶组件（高阶组件就是一个函数，传给它一个组件，它返回一个新的组件）。

import { connect } from 'react-redux';
import Header from '../components/Header';

export default connect()(Header);

上面代码中，Header 就是一个展示组件，经过 connect 处理后变成了容器组件，最后把它导出成模块。这个容器组件没有定义任何的业务逻辑，所有不能做任何事情。我们可以通过 mapStateToProps  和  mapDispatchToProps 来定义我们的业务逻辑。

import { connect } from 'react-redux';
import Title from '../components/Title';

const mapStateToProps = (state) => {
  return {
    title: state.title
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeColor: (color) => {
      dispatch({ type: 'CHANGE_COLOR', color });
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Title);

mapStateToProps 告诉 connect 我们要取 state 里的 title 数据，最终 title 数据会以 props 的方式传入 Title 这个展示组件。

mapStateToProps 还 会订阅 Store，每当 state 更新的时候，就会自动执行，重新计算展示组件的参数，从而触发展示组件的重新渲染。

mapDispatchToProps 告诉 connect 我们需要 dispatch action，最终 onChangeColor 会以 props 回调函数的方式传入 Title 这个展示组件。

Connect 组件大概的实现如下

export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
  class Connect extends Component {
    static contextTypes = {
      store: PropTypes.object
    }

    constructor () {
      super()
      this.state = {
        allProps: {}
      }
    }

    componentWillMount () {
      const { store } = this.context
      this._updateProps()
      store.subscribe(() => this._updateProps())
    }

    _updateProps () {
      const { store } = this.context
      let stateProps = mapStateToProps
        ? mapStateToProps(store.getState(), this.props) // 将 Store 的 state 和容器组件的 state 传入 mapStateToProps
        : {} // 判断 mapStateToProps 是否传入
      let dispatchProps = mapDispatchToProps
        ? mapDispatchToProps(store.dispatch, this.props) // 将 dispatch 方法和容器组件的 state 传入 mapDispatchToProps
        : {} // 判断 mapDispatchToProps 是否传入
      this.setState({
        allProps: {
          ...stateProps,
          ...dispatchProps,
          ...this.props
        }
      })
    }

    render () {
      // 将 state.allProps 展开以容器组件的 props 传入
      return <WrappedComponent {...this.state.allProps} />
    }
  }
  return Connect
}

小结

至此，我们就很清楚了，原来 React-redux 就是通过 Context 结合 Redux 来实现 React 应用的状态管理，通过 Connect 这个高阶组件来实现展示组件和容器组件的连接的。