将redux中的state与react中组件中的属性或者方法作绑定。

1、createConnect

作为高阶函数，创建Connect。

function createConnect({connectHOC = connectAdvanced,mapStateToPropsFactories = defaultMapStateToPropsFactories,mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,mergePropsFactories = defaultMergePropsFactories,selectorFactory = defaultSelectorFactory,} = {})

参数为对象，包含了connectHOC, mapStateToPropsFactories, mapDispatchToPropsFactories, mergePropsFactories和selectorFactory。其中connectHOC是用于连接高阶组件，mapStateToPropsFactories为属性映射工厂，mapDispatchToPropsFactories为分发映射工厂，mergePropsFactories为合并属性工厂。

mapStateToPropsFactories工厂主要包含两个

[whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing]

mapDispatchToPropsFactories分发工厂包含三个

[

whenMapDispatchToPropsIsFunction,

whenMapDispatchToPropsIsMissing,

whenMapDispatchToPropsIsObject

]

createConnect会返回connect函数。

function connect(mapStateToProps,mapDispatchToProps,mergeProps,{pure = true,areStatesEqual = strictEqual,areOwnPropsEqual = shallowEqual,areStatePropsEqual = shallowEqual,areMergedPropsEqual = shallowEqual,...extraOptions} = {}) {const initMapStateToProps = match(mapStateToProps,mapStateToPropsFactories,'mapStateToProps')const initMapDispatchToProps = match(mapDispatchToProps,mapDispatchToPropsFactories,'mapDispatchToProps')const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')return connectHOC(selectorFactory, {// used in error messagesmethodName: 'connect',// used to compute Connect's displayName from the wrapped component's displayName.getDisplayName: (name) => `Connect(${name})`,// if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changesshouldHandleStateChanges: Boolean(mapStateToProps),// passed through to selectorFactoryinitMapStateToProps,initMapDispatchToProps,initMergeProps,pure,areStatesEqual,areOwnPropsEqual,areStatePropsEqual,areMergedPropsEqual,// any extra options args can override defaults of connect or connectAdvanced...extraOptions,})}

2、wrapMapToPropsFunc

whenMapStateToPropsIsFunction和whenMapDispatchToPropsIsFunction都会调用wrapMapToPropsFunc。返回initProxySelector函数，创建proxy对象，处理属性映射

function initProxySelector(dispatch, { displayName }) {const proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {return proxy.dependsOnOwnProps? proxy.mapToProps(stateOrDispatch, ownProps): proxy.mapToProps(stateOrDispatch)}// allow detectFactoryAndVerify to get ownPropsproxy.dependsOnOwnProps = trueproxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch,ownProps) {proxy.mapToProps = mapToPropsproxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps)let props = proxy(stateOrDispatch, ownProps)if (typeof props === 'function') {proxy.mapToProps = propsproxy.dependsOnOwnProps = getDependsOnOwnProps(props)props = proxy(stateOrDispatch, ownProps)}if (process.env.NODE_ENV !== 'production')verifyPlainObject(props, displayName, methodName)return props}return proxy}

3、connectHOC

对组件作封装，实际函数是connectAdvanced，返回函数wrapWithConnect

4、whenMapDispatchToPropsIsObject

当mapDispatchToProps为对象时，mapDispatchToPropsFactories使用的是whenMapDispatchToPropsIsObject，绑定action的创建者，并且分发

function bindActionCreators(actionCreators, dispatch) {const boundActionCreators = {}for (const key in actionCreators) {const actionCreator = actionCreators[key]if (typeof actionCreator === 'function') {boundActionCreators[key] = (...args) => dispatch(actionCreator(...args))}}return boundActionCreators
}

react-redux中的connect相关推荐

Redux中的功能式React式编程简介
by Bhuvan Malik 通过布凡·马利克(Bhuvan Malik) Redux中的功能式React式编程简介 (An introduction to functional Reactive ...
使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库在线访问初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
优雅的在React项目中使用Redux 1
或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使 ...
react redux在项目中的使用
一开始我接触到redux是很懵的,看官方文档也很枯燥乏味,不理解说的什么意思,也是看过就忘,所以就结合公司的项目来熟悉一下redux.也可能有写的不对的地方,欢迎指出. 一.构建reducer 首先看 ...
如何在React Native中使用Redux Saga监视网络更改
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中使用Redux Saga监视网络更改 (How to monitor network change ...
【React】redux中引入createStore有删除线
redux中引入createStore有删除线如下图鼠标移进去看了一下发现,具体内容是使用了弃用的符号,请查阅文档,以获取更好的替代性解决方法 1.根据提示把import换成 import { ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...

react-redux中的connect

1、createConnect

2、wrapMapToPropsFunc

3、connectHOC

4、whenMapDispatchToPropsIsObject

react-redux中的connect相关推荐

最新文章

热门文章