文档章节

React和Redux的连接react-redux

 前端攻城老湿
发布于 11/18 15:19
字数 1281
阅读 49
收藏 1

通过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。 从它的使用来说,它的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组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

  • React组件如何响应store的变化?
  • 为什么connect选择性的merge一些props,而不是直接将整个state传入?
  • pure优化的是什么? 我们把connect返回的函数叫做Connector,它返回的是内部的一个叫Connect的组件,它在包装原有组件的基础上,还在内部监听了Redux的store的变化,为了让被它包装的组件可以响应store的变化:
trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}//欢迎加入全栈开发交流圈一起学习交流:864305860
handleChange () {//面向1-3年前端人员
 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)//欢迎加入全栈开发交流圈一起学习交流:864305860
 })//面向1-3年前端人员
)//帮助突破技术瓶颈,提升思维能力
export default class Main extends Component {
}

结语

感谢您的观看,如有不足之处,欢迎批评指正。

© 著作权归作者所有

共有 人打赏支持
粉丝 14
博文 25
码字总数 36833
作品 0
西城
私信 提问
React+Redux系列教程

参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址:https://github.com/lewis617/react-redux-tutorial.git React+Redux系列教程 react+redux教程(一)conne......

王春-海子
2016/08/20
107
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
07/20
0
0
如何使用react-redux-form填充动态默认值

     在这个实时编码/文章教程中,您将学习如何使用React框架和Redux在网页上创建自动填充的输入。   首先,react-redux-form与redux-form他们是相似的,但不一样。这个问题可能也困惑...

webstack前端栈
01/30
0
0
从零开始搭建React应用(二)——React应用架构

上一篇文章——从零开始搭建 React 应用(一)——基础搭建讲述了如何使用 webpack 搭建一个非常基础的 react 开发环境。本文将详细讲述搭建一个 React 应用的架构。 仓库地址:github.com/...

Mello_Z
07/17
0
0
对React、Redux、React-Redux详细剖析

前言 相信很多新手朋友们对于React、Redux、React-Redux这三者之间的关系和区别肯定有很多不解和疑惑。这里我们就来详细的剖析一下它们吧。 :负责组件的UI界面渲染; :数据处理中心; :连...

a独家记忆
07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flask框架web开发:零基础入门

Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架,它的优势就是极其简洁,但又非常灵活,而且容易学习和应用。因此Flask框架是Python新手快速开始web开发最好的选择,此外...

笔阁
6分钟前
0
0
VMware前路难测,多个厂家群雄逐鹿

在人们高谈Salesforce、亚马逊等新兴云计算厂商取得的成就时,以VMware、HPE和Cisco为代表的老牌厂商也在进行着自己的转型和变化,而且还取得一定的进展。以VMware为例,虚拟机巨头公布了第二...

linuxCool
9分钟前
0
0
什么是以太坊DAO?(一)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 “在区块链上,没有人知道你是一台冰箱”——理查德布朗 到目前为止,我们列出的所有...

geek12345
10分钟前
0
0
linux防火墙操作

一、.对于centos7自带的防火墙的相关指令 #停止firewall systemctl stop firewalld.service #禁止firewall开机启动 systemctl disable firewalld.service #查看firewall的状态 systemctl st......

张锦飞
13分钟前
0
0
Linux 磁盘与磁盘分区

  Linux 系统中所有的硬件设备都是通过文件的方式来表现和使用的,我们将这些文件称为设备文件,硬盘对应的设备文件一般被称为块设备文件。本文介绍磁盘设备在 Linux 系统中的表示方法以及...

SEOwhywhy
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部