用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中的数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android数据共享 sharedPreferences 的使用方法

    Android数据共享 sharedPreferences 的使用方法 Android 中通过 sharedPreferences 来持久化存储数据并进行共享 在 Activity 或存在 Context 环境中即可使用 context.getSharedPreferences(name, Context.MODE_PRIVATE); 设置要保存的数据: mSp = context.getSharedPreferences(name, Context.MODE_PRIVATE); mEditor

  • 使用Runnable实现数据共享

    使用Runnable实现数据共享,供大家参考,具体内容如下 先上代码: public class TestThread { private static final Logger logger = LoggerFactory.getLogger(TestThread.class); private final class MyRunnable implements Runnable { private int i; public MyRunnable() { this.i = 10; } pub

  • 用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,c

  • React学习之受控组件与数据共享实例分析

    React学习之受控组件与数据共享实例分析

    本文实例讲述了React学习之受控组件与数据共享.分享给大家供大家参考,具体如下: 在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会自己储存值,并且根据用户输入进行更新.但在React中,可变的值通常保存在组件的state中,并且只能用 setState() 方法进行更新.为了解决二者的矛盾,可以让HTML元素不再自己储存数据,而使用来自于react的state.也就是说HTML元素把数据保存在react组件的state中,并

  • vue实现两个组件之间数据共享和修改操作

    我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件. 怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="hand

  • Vue组件之间数据共享浅析

    目录 组件数据共享 父组件向子组件共享数据 子组件向父组件共享数据 兄弟组件共享数据 组件数据共享 组件之间的关系:在项目开发中,组件之间的最常用的关系分为两种:父子关系和兄弟关系. 父组件向子组件共享数据 通过自定义属性实现父向子传值. 子组件向父组件共享数据 通过自定义事件实现子向父传值 兄弟组件共享数据 在 vue2.x中,兄弟组件之间数据共享方案是 EventBus. EventBus的使用步骤: 1)创建eventBus.js模块,并向外共享一个Vue的实例对象 import Vue

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • Vue2.0子同级组件之间数据交互方法

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

  • Vue组件之间的数据共享详解

    Vue组件之间的数据共享详解

    目录 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.1 父子组件之间的数据共享 1. 父 -> 子共享数据 2.子 -> 父共享数据 1.2 兄弟组件之间的数据共享 总结 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.父子关系 2.兄弟关系 1.1 父子组件之间的数据共享 父子组件之间的数据共享又分为: 1. 父 -> 子共享数据 子组件: 父组件: 2.子 -> 父共享数据 子组件向父组件共享数据使用自定义事件.示例代码如下 子组件: 父组件: 页面显

  • 在 React 项目中全量使用 Hooks的方法

    目录 前言 React Hooks useState useReducer 基础用法 进阶用法 useContext useEffect useLayoutEffect useRef useImperativeHandle useCallback useMemo React Redux Hooks useSelector useDispatch React Router Hooks useHistory useLocation useParams useRouteMatch 参考 结语 前言 此

  • Vue中组件的数据共享分析讲解

    目录 组件之间的关系 父子组件之间的数据共享 兄弟组件之间的数据共享 EventBus的使用步骤 组件之间的关系 在项目开发中,组件之间的最常见的关系分为两种 父子关系 兄弟关系 父->子共享数据 父组件向子组件共享数据需要使用自定义属性. 父子组件之间的数据共享 父组件: <template> <div id="app"> <h1>app根组件</h1> <left :msg="message" :use

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

随机推荐