用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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
React Fragment介绍与使用详解
Nov 11 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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
基于header的一些常用指令详解
2013/06/06 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python3中for循环踩过的坑记录
2020/12/14 Python
北京某公司的.net笔试题
2014/03/20 面试题
英文求职信结束语大全
2013/10/26 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
先进单位申报材料
2014/12/25 职场文书
茶花女读书笔记
2015/06/29 职场文书
话题作文之成长
2019/12/09 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers
vue封装数字翻牌器
2022/04/20 Vue.js