用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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP生成plist数据的方法
2015/06/16 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
好的演讲稿开场白
2013/12/30 职场文书
给老婆的保证书范文
2014/04/28 职场文书
档案保密承诺书
2014/06/03 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
保护动物的宣传语
2015/07/13 职场文书
初中班主任心得体会
2016/01/07 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技