浅谈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文件的小脚本
Jun 28 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jquery validate demo 基础
Oct 29 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
javascript实现放大镜功能
Dec 09 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jquery禁用右键示例
2014/04/28 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python爬虫如何解决图片验证码
2021/02/14 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
行风评议整改报告
2014/11/06 职场文书
现场施工员岗位职责
2015/04/11 职场文书
python turtle绘图
2022/05/04 Python