React-Redux 源码解析系列 -- React-Redux的做用

前面的章节讲完了redux的部分，又已经有了react,那为何还须要有React-Redux呢？这个React-Redux 又帮助咱们作了什么呢？

context 跟 store

先来想一个问题，若是光使用react，有时候会遇到一个组件的状态要在另外一个组件中用到，这时候就须要把这个状态提高。可是咱们不能没完没了的提高呀，因此react就有了一个context，这样整个app均可以访问到这个值。

可是用context是不安全的，由于任何组件均可以改变它。怎么办？立刻用亮甲？

方法

因此咱们须要redux这个专业的状态管理框架来帮忙，而redux的核心就是发明了store，经过dispatch一个action 来改变store里的值，若是用redux来管理咱们的状态，就能够解决上述问题~

谁来链接react, redux? 这时候react-redux就闪闪出现了，它的做用就是链接react跟redux。

how to

一、在最顶层的react组件里，将redux的store定义为context，这样全部的子组件经过this.context.store 均可以共享store里的状态。

static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
     return { store }
  }

二、每一个须要访问store的子组件里，在componentWillMount的时候作两件事

• 经过this.context.store拿到本身想要的值，而后setState保存这个状态。

• 经过store的subscribe 订阅listner -- render function,在每次状态更新的时候
  都会从新渲染。

栗子：

static contextTypes = {
    store: PropTypes.object
  }

  constructor () {
    super()
    this.state = { themeColor: '' }
  }

  componentWillMount () {
    this._updateThemeColor()
    store.subscribe(() => this._updateThemeColor())
  }

  _updateThemeColor () {
    const { store } = this.context
    const state = store.getState()
    this.setState({ themeColor: state.themeColor })
  }

到这一步，能够说react，跟redux就联系上了，实际就是context跟store的结合。

可是目前的代码仍是有问题的：

• 全部须要获取状态的字组件都须要重复上面的逻辑，显然很是麻烦

• 子组件对于context的依赖太强，形成可复用性差，若是我要在没有context的地方使用它，就用不了了

首先说第一个问题：这个问题能够经过把共同的逻辑都放在高阶组件里解决。高阶组件新包装的组件跟原来的组件经过props传递信息。

第二个问题：说解决方法以前，先来探讨一下什么是可复用性高的组件：一个组件只依赖于传入的props还有自身的State来渲染，而不依赖与外部的任何数据，也就是咱们常说的纯组件（也叫Dumb Component），它除了给它传的props，对外面的数据都不闻不问，给它什么，它就渲染什么。

注：因此在写组件的时候，也要多写Dumb component哦~

说到这里，思路就变得清晰了，咱们要的就是经过高阶组件去获取store里的值，经过props传给下面的子组件。

屏幕快照 2017-11-18 下午5.57.22

讲到这里，就能够回答开篇的问题了~

其实React-Redux 提供了两个接口，provider跟connect

• provider是帮助咱们把store设置为childContext的

• connect就是高阶组件，它负责去获取store的值，经过props传给下面的子组件，同时订阅组件的渲染事件

最后，本文实际上是堆参考文档的连接作的一个总结，想去看完整版能够戳下面~

参考文档：
http://huziketang.com/books/r...