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

1、在最顶层的react组件里，将redux的store定义为context，这样所有的子组件通过this.context.store 都可以共享store里的状态。

static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
     return { store }
  }

2、每个需要访问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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!