详解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 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue使用openlayers实现移动点动画
Sep 24 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
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
ext实现完整的登录代码
2008/08/08 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python编写分类决策树的代码
2017/12/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
softmax及python实现过程解析
2019/09/30 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
工程测量与监理专业应届生求职信
2013/11/27 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
一年级家长会邀请函
2014/01/25 职场文书
离职保密承诺书
2014/05/28 职场文书
电子商务求职信
2014/06/15 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
转让协议书
2015/01/27 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript