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

相关文章

来自专栏禅林阆苑

小程序开发总结01 - 模块化开发流程规范

H5 的开发涉及开发工具、前端框架、模块管理工具、任务管理工具、UI库、接口调用工具、各种浏览器运行环境等,尽管H5丰富的开发环境给了开发者更加灵活的配置方案,...

1527
来自专栏哲学驱动设计

090615 T 数据库范式

帮助记忆五级范式:     一级范式:         消除每个表格中重复的组。         为每套相关的数据建立一个独立的表格。         使用一个...

1735
来自专栏编程

MVC时代的终结,接下来的函数式响应型编程会成为未来的霸主?

React.js,Elm,Cycle.js和其他UI框架引入了一种构建用户界面的新方法。通过将函数式响应型编程的原理应用于UI开发中,他们甚至改变了我们对用户界...

17310
来自专栏一“技”之长

iOS程序框架设计之皮肤切换功能 原

        移动应用的开发中,有时我们会需要例如更换皮肤此类的功能,andorid采用xml配置UI的方式,这个问题或许还容易解决些,iOS的主要UI逻辑则...

554
来自专栏Java帮帮-微信公众号-技术文章全总结

【大牛经验】Java开源JSP标签库(32款)

01 displytag 与Struts结合使用最出名的一个tag主要是显示表格数据很漂亮、完善。 ? 02 cewolf tag 用来在web上显...

2635
来自专栏码农二狗

解决金字塔回调问题的两种手段

975
来自专栏司想君

手拉手,用Vue开发动态刷新Echarts组件

2788
来自专栏知识分享

android的PowerManager和PowerManager.WakeLock

  学习android一段时间了,为了进一步了解android的应用是如何设计开发的,决定详细研究几个开源的android应用。从一些开源应用中吸收点东西,一边...

674
来自专栏企鹅号快讯

JavaScript 性能优化技巧分享

英文: Ivan Čurić 译文:葡萄城控件 http://www.cnblogs.com/powertoolsteam/p/javascript-per...

34515
来自专栏小鄧子的技术博客专栏

【译】Android技术栈,1#架构

本文是如何开发一款具有扩展性,维护性和测试性的Android应用专题的第一篇。本专题将会涉及到一些设计模式和类库的使用方式,减少Android Develope...

693

扫码关注云+社区