关于react-redux中Provider、connect的解析
Provider
是什么
react-redux 提供的一个 React 组件
作用
把 store 提供给其子组件
//使用 redux 的 createStore 方法创建的一个 store
const store = createStore(todoApp,{})
// store 作为一个 prop 传给 Provider 组件
render(
<Provider store={store}>
<App/>
</Provider>, document.getElementById('app'))
connect
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
作用
把“指定的state & 指定的action”和 React组件 连接起来 ==> 容器组件
参数说明
mapStateToProps
这是一个function,返回一个object;
(state, [ownProps]) => ({ }) // 通常省略第二个参数
作用 把指定的state作为props注入到 UI组件 中
const mapStateToProps = state => {
return {
title: state.title,
list: state.list
};
}
当然,不必将 state 中的数据原封不动地传入组件,可以根据 state 中的数据,动态地输出组件需要的(最小)属性。
const mapStateToProps = (state) => {
return {
greaterThanFive: state.count > 5 // 假如只需要知道count大不大于5就成
}
}
函数的第二个参数 ownProps,是 React的UI组件自己的 props。有的时候,ownProps 也会对其产生影响。
比如,当你在 store 中维护了一个用户列表,而你的组件只关心一个用户。
const mapStateToProps = (state, ownProps) => {
// state 是 {userList: [{id: 0, name: '王二'},{id: 1, name: '李四'}]}
return {
user: _.find(state.userList, {id: ownProps.userId})
}
}
class MyComp extends Component {
static PropTypes = {
userId: PropTypes.string.isRequired,
user: PropTypes.object
};
render(){
return <div>用户名:{this.props.user.name}</div>
}
}
const Comp = connect(mapStateToProps)(MyComp);
mapDispatchToProps
这可以是一个function,还可以是object,
作用 把指定的action作为props注入到UI组件中
// 方法
const mapDispatchToProps = dispatch => {
return {
destroyTodo : () => dispatch({
type : 'DESTROY_TODO'
})
}
}
// 对象
mergeProps
是一个函数,用来筛选哪些参数传递给组件。这个函数接受3个参数
const defaultMergeProps = (stateProps, dispatchProps, ownProps ) => ({
...ownProps,
...stateProps,
...dispatchProps
})
stateProps是mapStateToProps的返回值,dispatchProps是mapDispatchToProps返回值,ownProps 是当前组件自己的属性。
这个函数默认把这三个返回值拼装到一起传递给组件,可修改。
options
一个对象,有两个布尔,一个是pure,一个是withRef。
- pure为false,只要connect接受到属性,不管是否有变化,必然刷新connect组件。
- withRef为true时,在装饰传入的 React 组件时,Connect 会保存一个对该组件的 refs 引用,可以通过 getWrappedInstance 方法来获得该 refs,并最终获得原始的 DOM 节点。
使用
const newApp = connect(store)(UI)
关于react-redux中Provider、connect的解析的更多相关文章
- React系列——react-redux之connect方法解析
connect简介 前方高能预警,有耐心才能看完文章!! react-redux仅有2个API,Provider和connect,Provider提供的是一个顶层容器的作用,实现store的上下文 ...
- 在react/redux中使用Immutable
在redux中使用Immutable 1.什么是Immutable? Immutable是一旦创建,就不能被更改的数据. 对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutab ...
- let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel
let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- react+redux基础用法
在学react的是,发现一旦我们封装好了我们的组件,那么我们的项目就跟搭积木一样简单快速,可是我们发现了一个问题,在一个页面往往会嵌套很多的组件,子组件必须要通过父组件传递参数才能渲染出数据,我们回想 ...
- react项目中的注意点
一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx 语法进行编译, ...
- 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
- 清晰理解redux中的
首先需要明白 Redux 的单一状态树的概念,所谓的单一状态树,就是指“所有的 state 都以一个对象树的形式储存在一个单一的 store 中.” 比如我们有这么一个状态树(或者你叫它状态对象也行) ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- Python 学习笔记(七)Python字符串(二)
索引和切片 索引 是从0开始计数:当索引值为负数时,表示从最后一个元素(从右到左)开始计数 切片 用于截取某个范围内的元素,通过:来指定起始区间(左闭右开区间,包含左侧索引值对应的元素,但不包含右测 ...
- Python 学习笔记(三)数字
Python 数字 int 整型 是正或负整数 2 long 长整型 整数最后是一个大写或小写的L 2L float 浮点型 由整数部分和小数部分组成 2.0 complex 复数 小 ...
- 序列(Sequence)创建、使用、修改和删除
序列(Sequence)是用来生成连续的整数数据的对象.序列常常用来作为主键中增长列,序列中的可以升序生成,也可以降序生成. 语法结构:创建序列 CREATE SEQUENCE sequence_na ...
- 2小时学会spring boot 以及spring boot进阶之web进阶(已完成)
1:更换Maven默认中心仓库的方法 <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirr ...
- 搭建mysql主从复制和删库数据恢复策略
搭建主从复制 主机: [mysqld] 下增加 vim /etc/my.cnf ## 设置 server_id,一般设置为 IP server_id=8 # # 复制过滤:需要备份的数据库,输出 bi ...
- mysql查看锁等信息SQL
查看锁等信息,包括锁信息: select "HOLD:",ph.id h_processid,trh.trx_id h_trx_id,trh.trx_started h_start ...
- 通过命令在navicat中创建数据库及表结构
方法/步骤 首先我们双击打开[navicat]这款软件,在菜单栏中选择[文件]-->[新建连接]-->[MySQL]: 步骤阅读 在打开的[新建连接]对话框中输入[连接名]和[ ...
- Co. - Apple - Apple ID
有些应用或游戏,在国内 App Store 没上架或者被下架了,但是其他国家或地区(如美国.香港和台湾等)的 App Store 却提供下载,这时我们需要登陆一个相应地区的 Apple ID 才可以下 ...
- 用友二次开发之科脉TOT3凭证接口
按客户的要求,根据科脉导出的数据,开发一个工具,将凭证导入T3 这个科目导出的凭证格式. 选择账套登陆,你没看错,这个是我开发的登陆界面. 选择接口文件. 软件自动进数据分类,你可以看到数据了.但只是 ...
- 自己动手编写 Dockerfile 构建自定义的Jenkins
1.构建jenkins 镜像 vim Dockerfile FROM jenkins USER root ARG dockerGid=999 RUN echo "docker:x:${d ...