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传给下面的子组件。

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

canvas画简单电路图

87711
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8868
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3025
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7306
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3318
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2852
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

3017
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏杨龙飞前端

scrollto 到指定位置

2984

扫码关注云+社区