react、redux、react-redux之间的关系

React

一些小型项目，只使用 React 彻底够用了，数据管理使用props、state便可，那何时须要引入Redux呢？ 当渲染一个组件的数据是经过props从父组件中获取时，一般状况下是 A --> B，但随着业务复杂度的增长，有多是这样的：A --> B --> C --> D --> E，E须要的数据须要从A那里经过props传递过来，以及对应的 E --> A逆向传递callback。组件BCD是不须要这些数据的，可是又必须经由它们来传递，这确实有点不爽，并且传递的props以及callback对BCD组件的复用也会形成影响。或者兄弟组件之间想要共享某些数据，也不是很方便传递、获取等。诸如此类的状况，就有必要引入Redux了。

其实 A --> B --> C --> D --> E 这种状况，React不使用props层层传递也是能拿到数据的，使用Context便可。后面要讲到的react-redux就是经过Context让各个子组件拿到store中的数据的。

Redux

其实咱们只是想找个地方存放一些共享数据而已，你们均可以获取到，也均可以进行修改，仅此而已。 那放在一个所有变量里面行不行？行，固然行，可是太不优雅，也不安全，由于是全局变量嘛，谁都能访问、谁都能修改，有可能一不当心被哪一个小伙伴覆盖了也说不定。那全局变量不行就用私有变量呗，私有变量、不能轻易被修改，是否是立马就想到闭包了...

如今要写这样一个函数，其知足：

• 存放一个数据对象
• 外界能访问到这个数据
• 外界也能修改这个数据
• 当数据有变化的时候，通知订阅者

function createStore(reducer, initialState) {
  // currentState就是那个数据
  let currentState = initialState;
  let listener = () => {};

  function getState() {
    return currentState;
  }
  function dispatch(action) {
    currentState = reducer(currentState, action); // 更新数据
    listener(); // 执行订阅函数
    return action;
  }
  function subscribe(newListener) {
    listener = newListener;
    // 取消订阅函数
    return function unsubscribe() {
      listener = () => {};
    };
  }
  return {
    getState,
    dispatch,
    subscribe
  };
}

const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数
复制代码

更新数据执行的步骤：

• What：想干什么 --- dispatch(action)
• How：怎么干，干的结果 --- reducer(oldState, action) => newState
• Then?：从新执行订阅函数（好比从新渲染UI等）

这样就实现了一个store，提供一个数据存储中心，能够供外部访问、修改等，这就是Redux的主要思想。 因此，Redux确实和React没有什么本质关系，Redux能够结合其余库正常使用。只不过Redux这种数据管理方式，跟React的数据驱动视图理念很合拍，它俩结合在一块儿，开发很是便利。

如今既然有了一个安全的地方存取数据，怎么结合到React里面呢？ 咱们能够在应用初始化的时候，建立一个window.store = createStore(reducer)，而后在须要的地方经过store.getState()去获取数据，经过store.dispatch去更新数据，经过store.subscribe去订阅数据变化而后进行setState...若是不少地方都这样作一遍，实在是不堪其重，并且，仍是没有避免掉全局变量的不优雅。

React-Redux

因为全局变量有诸多的缺点，那就换个思路，把store直接集成到React应用的顶层props里面，只要各个子组件能访问到顶层props就好了，好比这样：

<TopWrapComponent store={store}>
  <App /> </TopWrapComponent>,
复制代码

React刚好提供了这么一个钩子，Context，用法很简单，看一下官方demo就明了。如今各个子组件已经可以轻易地访问到store了，接下来就是子组件把store中用到的数据取出来、修改、以及订阅更新UI等。每一个子组件都须要这样作一遍，显然，确定有更便利的方法：高阶组件。经过高阶组件把store.getState()、store.dispatch、store.subscribe封装起来，子组件对store就无感知了，子组件正常使用props获取数据以及正常使用callback触发回调，至关于没有store存在同样。

下面是这个高阶组件的大体实现：

function connect(mapStateToProps, mapDispatchToProps) {
  return function(WrappedComponent) {
    class Connect extends React.Component {
      componentDidMount() {
        // 组件加载完成后订阅store变化，若是store有变化则更新UI
        this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
      }
      componentWillUnmount() {
        // 组件销毁后，取消订阅事件
        this.unsubscribe();
      }
      handleStoreChange() {
        // 更新UI
        this.forceUpdate();
      }
      render() {
        return (
          <WrappedComponent {...this.props} {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据 {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch /> ); } } Connect.contextTypes = { store: PropTypes.object }; return Connect; }; } 复制代码

使用connect的时候，咱们知道要写一些样板化的代码，好比mapStateToProps、mapDispatchToProps这两个函数：

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  };
};

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

// 上述代码执行以后，能够看到connect函数里面的
  <WrappedComponent
    {...this.props}
    {...mapStateToProps(this.context.store.getState())}
    {...mapDispatchToProps(this.context.store.dispatch)}
  />

// 就变成了
  <WrappedComponent
    {...this.props}
    {count: store.getState().count}
    {dispatch: store.dispatch}
  />

// 这样，子组件Child的props里面就多了count和dispatch两个属性
// count能够用来渲染UI，dispatch能够用来触发回调
复制代码

---

So，这样就OK了？OK了。 经过一个闭包生成一个数据中心store，而后把这个store绑定到React的顶层props里面，子组件经过HOC创建与顶层props.store的联系，进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一块儿的，若是想了解更高级的功能，好比redux中间件、reducer拆分、connect的其余参数等，能够去看一下对应的源码。