用react-redux实现react组件之间数据共享的方法


Posted in Javascript onJune 08, 2018

上篇文章写到了redux实现组件数据共享的方法,但是在react中,redux作者提供了一个更优雅简便的模块实现react组件之间数据共享。那就是利用react-redux

利用react-redux实现react组件数据之间数据共享

1.安装react-redux

$ npm i --save react-redux

2.从react-redux导入Prodiver组件将store赋予Provider的store属性,

将根组件用Provider包裹起来。

import {Provider,connect} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
 <Wrap/>
</Provider>,document.getElementById('example'))

这样根组件中所有的子组件都可以获得store中的值

3.connect二次封装根组件

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

connect接收两个函数作为参数,一个mapStateToProps定义哪些store属性会被映射到根组件上的属性(把store传入react组件),一个mapDispatchToProps定义哪些行为action可以作为根组件属性(把数据从react组件传入store)

3.定义这两个映射函数

function mapStateToProps(state){
 return {
  name:state.name,
  pass:state.pass
 }
}
function mapDispatchToProps(dispatch){
 
 return {actions:bindActionCreators(actions,dispatch)
 }
}

把store中的name,pass映射到根组件的name,pass属性。

actions是一个包含了action构建函数的对象,用bindActionCreators把对象actions绑定到根组件actions属性上。

4.在根组件引用子组件的位置用 <Show name={this.props.name} pass={this.props.pass}></Show>将store数据传入子组件.

5.在子组件中调用actions中的方法来更新store中的数据

<Input actions={this.props.actions} ></Input>

先将actions作为属性传入子组件

子组件调用actions中的方法创建action

//Input组件
export default class Input extends React.Component{
sure(){
this.props.actions.add({name:this.refs.name.value,pass:this.refs.pass.value})
}
 render(){ 
  return (
    <div> 
  姓名:<input ref="name" type="text"/>
  密码:<input ref="pass" type="text"/>
  <button onClick={this.sure.bind(this)}>登录</button>
 </div>

  )
 }
}

因为我们采用了bindActionCreators函数,创建action后会立即自动调用store.dispatch(action)将数据更新到store.

这样我们就利用react-redux模块完成了react各个组件之间数据共享。

跟上篇文章一样,实现了在一个组件Input中通过actions更新数据到store,然后在另一个组件Show中展示store中的数据

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

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 #Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 #Javascript
原生实现一个react-redux的代码示例
Jun 08 #Javascript
vue项目中使用百度地图的方法
Jun 08 #Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
运动会入场词60字
2014/02/15 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
店铺转让协议书
2014/12/02 职场文书
专职安全员岗位职责
2015/04/11 职场文书
放牛班的春天观后感
2015/06/01 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python