详解react、redux、react-redux之间的关系


Posted in Javascript onApril 11, 2018

本文介绍了react、redux、react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下:

React

一些小型项目,只使用 React 完全够用了,数据管理使用props、state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E --> A逆向传递callback。组件BCD是不需要这些数据的,但是又必须经由它们来传递,这确实有点不爽,而且传递的props以及callback对BCD组件的复用也会造成影响。或者兄弟组件之间想要共享某些数据,也不是很方便传递、获取等。诸如此类的情况,就有必要引入Redux了。

其实 A --> B --> C --> D --> E 这种情况,React不使用props层层传递也是能拿到数据的,使用Context即可。后面要讲到的react-redux就是通过Context让各个子组件拿到store中的数据的。

Redux

其实我们只是想找个地方存放一些共享数据而已,大家都可以获取到,也都可以进行修改,仅此而已。 那放在一个全部变量里面行不行?行,当然行,但是太不优雅,也不安全,因为是全局变量嘛,谁都能访问、谁都能修改,有可能一不小心被哪个小伙伴覆盖了也说不定。那全局变量不行就用私有变量呗,私有变量、不能轻易被修改,是不是立马就想到闭包了...

现在要写这样一个函数,其满足:

  1. 存放一个数据对象
  2. 外界能访问到这个数据
  3. 外界也能修改这个数据
  4. 当数据有变化的时候,通知订阅者
function createStore(reducer, initialState) {
 // currentState就是那个数据
 let currentState = initialState;
 let listener = () => {};

 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新数据
 listener(); // 执行订阅函数
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消订阅函数
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}

const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数

更新数据执行的步骤:

  1. What:想干什么 --- dispatch(action)
  2. How:怎么干,干的结果 --- reducer(oldState, action) => newState
  3. Then?:重新执行订阅函数(比如重新渲染UI等)

这样就实现了一个store,提供一个数据存储中心,可以供外部访问、修改等,这就是Redux的主要思想。 所以,Redux确实和React没有什么本质关系,Redux可以结合其他库正常使用。只不过Redux这种数据管理方式,跟React的数据驱动视图理念很合拍,它俩结合在一起,开发非常便利。

现在既然有了一个安全的地方存取数据,怎么结合到React里面呢? 我们可以在应用初始化的时候,创建一个window.store = createStore(reducer),然后在需要的地方通过store.getState()去获取数据,通过store.dispatch去更新数据,通过store.subscribe去订阅数据变化然后进行setState...如果很多地方都这样做一遍,实在是不堪其重,而且,还是没有避免掉全局变量的不优雅。

React-Redux

由于全局变量有诸多的缺点,那就换个思路,把store直接集成到React应用的顶层props里面,只要各个子组件能访问到顶层props就行了,比如这样:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React恰好提供了这么一个钩子,Context,用法很简单,看一下官方demo就明了。现在各个子组件已经能够轻易地访问到store了,接下来就是子组件把store中用到的数据取出来、修改、以及订阅更新UI等。每个子组件都需要这样做一遍,显然,肯定有更便利的方法:高阶组件。通过高阶组件把store.getState()、store.dispatch、store.subscribe封装起来,子组件对store就无感知了,子组件正常使用props获取数据以及正常使用callback触发回调,相当于没有store存在一样。

下面是这个高阶组件的大致实现:

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化,如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后,取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}

使用connect的时候,我们知道要写一些样板化的代码,比如mapStateToProps、mapDispatchToProps这两个函数:

const mapStateToProps = state => {
 return {
 count: state.count
 };
};

const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(Child);

// 上述代码执行之后,可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />

// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />

// 这样,子组件Child的props里面就多了count和dispatch两个属性
// count可以用来渲染UI,dispatch可以用来触发回调

So,这样就OK了?OK了。 通过一个闭包生成一个数据中心store,然后把这个store绑定到React的顶层props里面,子组件通过HOC建立与顶层props.store的联系,进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一起的,如果想了解更高级的功能,比如redux中间件、reducer拆分、connect的其他参数等,可以去看一下对应的源码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
loading动画特效小结
Jan 22 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
Mac下安装vue
Apr 11 #Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 #Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 #Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 #Javascript
vue 组件高级用法实例详解
Apr 11 #Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 #Javascript
React如何避免重渲染
Apr 10 #Javascript
You might like
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript 事件入门知识
2015/04/13 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python 合并文件的具体实例
2013/08/08 Python
python读取Android permission文件
2013/11/01 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
super关键字的用法
2012/04/10 面试题
大学毕业感言一句话
2014/02/06 职场文书
人力资源主管职责范本
2014/03/05 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
保险公司演讲稿
2014/09/02 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
《检阅》教学反思
2016/02/22 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis