详解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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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 日常开发小技巧
2009/09/23 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
python基于SMTP协议发送邮件
2019/05/31 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
flask实现验证码并验证功能
2019/12/05 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
pycharm实现猜数游戏
2020/12/07 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
公司门卫岗位职责范本
2014/07/08 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
教师调动申请报告
2015/05/18 职场文书
运输公司工作总结
2015/08/11 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
Go web入门Go pongo2模板引擎
2022/05/20 Golang