用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 indexOf函数使用说明
Jul 03 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS作用域链详解
Jun 26 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
javascript的BOM
2016/05/03 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
浅谈python中的数字类型与处理工具
2017/08/02 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python如何实现动态数组
2019/11/02 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
python asyncio 协程库的使用
2021/01/21 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
数控个人求职信范文
2014/02/03 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
南京南京观后感
2015/06/02 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Python基础之元类详解
2021/04/29 Python