用react-redux实现react组件之间数据共享的方法
上篇文章写到了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中的数据
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在react中使用windicss的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了react自动化构建路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持2023-01-01
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了创建React项目并配置webpack,在这里需要注意，Create React App requires Node 14 or higher.需要安装高版本的node，本文给大家介绍的非常详细，需要的朋友参考下吧2022-01-01
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态2022-11-11
这篇文章主要给大家介绍了React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域,文章通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了记录一次完整的react hooks实践，通过一个简单示例，介绍了react hooks，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要为大家介绍了React DOM-diff节点源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
最新评论