浅谈React和Redux的连接react-redux


Posted in Javascript onDecember 04, 2017

之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。

之前仅通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。

react-redux提供两个关键模块:Provider和connect。

Provider

Provider这个模块是作为整个App的容器,在你原有的App Container的基础上再包上一层,它的工作很简单,就是接受Redux的store作为props,并将其声明为context的属性之一,子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做,将store放在context里,是为了给下面的connect用的。

这个是Provider的使用示例:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById('root')
)

connect

这个模块是算是真正意义上连接了Redux和React,正好它的名字也叫connect。

先考虑Redux是怎么运作的:首先store中维护了一个state,我们dispatch一个action,接下来reducer根据这个action更新state。

映射到我们的React应用中,store中维护的state就是我们的app state,一个React组件作为View层,做两件事:render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render,并包装action creator用于在响应用户操作时dispatch一个action。

好了,详细看看connect这个模块做了什么。先从它的使用来说,它的API如下:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps是一个函数,返回值表示的是需要merge进props的state。默认值为() => ({}),即什么都不传。

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps是可以是一个函数,返回值表示的是需要merge仅props的actionCreators,这里的actionCreator应该是已经被包装了dispatch了的,推荐使用redux的bindActionCreators函数。

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

更方便的是可以直接接受一个对象,此时connect函数内部会将其转变为函数,这个函数和上面那个例子是一模一样的。

mergeProps用于自定义merge流程,下面这个是默认流程,parentProps值的就是组件自身的props,可以发现如果组件的props上出现同名,会被覆盖。

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

options共有两个开关:pure代表是否打开优化,详细内容下面会提,默认为true,withRef用来给包装在里面的组件一个ref,可以通过getWrappedInstance方法来获取这个ref,默认为false。

connect返回一个函数,它接受一个React组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

然后几个问题:

  1. React组件如何响应store的变化?
  2. 为什么connect选择性的merge一些props,而不是直接将整个state传入?
  3. pure优化的是什么?

我们把connect返回的函数叫做Connector,它返回的是内部的一个叫Connect的组件,它在包装原有组件的基础上,还在内部监听了Redux的store的变化,为了让被它包装的组件可以响应store的变化:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

但是通常,我们connect的是某个Container组件,它并不承载所有App state,然而我们的handler是响应所有state变化的,于是我们需要优化的是:当storeState变化的时候,仅在我们真正依赖那部分state变化时,才重新render相应的React组件,那么什么是我们真正依赖的部分?就是通过mapStateToProps和mapDispatchToProps得到的。

具体优化的方式就是在shouldComponentUpdate中做检查,如果只有在组件自身的props改变,或者mapStateToProps的结果改变,或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true,检查的方式是进行shallowEqual的比较。

所以对于某个reducer来说:

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象,可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

另外在connect的时候,要谨慎map真正需要的state或者actionCreators到props中,以避免不必要的性能损失。

最后,根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法:

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

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

Javascript 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
js完整倒计时代码分享
Sep 18 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
koa-router源码学习小结
2018/09/07 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python三引号如何输入
2020/07/06 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
挂牌仪式主持词
2014/03/20 职场文书
租赁协议书范本
2014/04/22 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
董事长致辞
2015/07/29 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server