黄qiong

2017-11-19 17:55

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

本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载

前面的章节讲完了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 订阅listener-- 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传给下面的子组件。

讲到这里,就可以回答开篇的问题了~

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

  • provider是帮助我们把store设置为childContext的
  • connect就是高阶组件,它负责去获取store的值,通过props传给下面的子组件,同时订阅组件的渲染事件

最后,本文其实是参考文档的链接做的一个总结,想去看完整版可以戳下面~

参考文档: http://huziketang.com/books/react/lesson38

2条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。