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 条评论
登录 后参与评论

相关文章

来自专栏Python绿色通道

Python爬虫:现学现用xpath爬取豆瓣音乐

爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能

1133
来自专栏ionic3+

【组件篇】ionic3分组索引及锚点滚动列表

好久没有写文章了,趁着吃完饭消化的时候打算写一篇。先前一篇文章提到并关注的capacitor终于出到1.0.0-alpha.5了,本想写它,但是内容比较多,所以...

1042
来自专栏互联网杂技

20个为前端开发者准备的文档和指南6

1.SitePoint Sass Reference(SitePoint站点的Sass手册) 它是SitePoint自有的项目,是由我们的常驻高手Hugo Gi...

36910
来自专栏葡萄城控件技术团队

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

除了WijmoJS 的可视化在线设计器之外(在这里阅读基于Web的WijmoJS Designer),我们刚刚发布了针对Angular开发的Visual Stu...

1374
来自专栏量化投资与机器学习

【精心解读】关于Jupyter Notebook的28个技巧

Jupyter具有很强的可扩展性,支持许多编程语言,可以很容易地托管在计算机上或几乎所有的服务器上,只需要拥有ssh或http访问权限。 最重要的是,它是完全免...

8346
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

741
来自专栏AhDung

【C#】注意用“划算”的方式使用图标

先解释一下何谓“划算”:假定一个Winform程序包含若干个窗体,每个窗体左上角都要显示图标(即要设置Form.Icon属性),该程序本身也要有个图标(用于在O...

863
来自专栏iKcamp

翻译 | 使用A-Frame打造WebVR版《我的世界》

原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是...

4149
来自专栏CSDN技术头条

Mark!Android最佳的开源库集锦

工欲善其事,必先利其器。一个好的开发库可以快速提高开发者的工作效率,甚至让开发工作变得简单。本文收集了大量的Android开发库,快来切磋一下,到底哪一个最适合...

1857
来自专栏听雨堂

动态控件的新思路

        常常有如此感叹:动态控件好加,但是状态维持困难。就是说,加入动态控件很容易,关联处理事件也不难,但是对于控件的状态把握,却很麻烦。往往需要在lo...

1637

扫码关注云+社区