详解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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 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实现httpclient类示例
2014/04/08 PHP
php7 新增功能实例总结
2020/05/25 PHP
php命令行模式代码实例详解
2021/02/26 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python实现点云投影到平面显示
2020/01/18 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
预备党员表决心书
2014/03/11 职场文书
教师产假请假条范文
2014/04/10 职场文书
市场营销工作计划书
2014/05/06 职场文书
高三励志标语
2014/06/05 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers