用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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
老生常谈js数据类型
Aug 03 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php实现cookie加密的方法
2015/03/10 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue封装的组件全局注册并引用
2019/07/24 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python 提取key 为中文的json 串方法
2018/12/31 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
宿舍标语大全
2014/06/19 职场文书
音乐学专业求职信
2014/07/22 职场文书
授权委托书
2014/09/17 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
端午节寄语2015
2015/03/23 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书