使用原生redux模块在React组件之间实现数据共享小实例

JerryC 发布于2019-08-20 16:31 / 2722人阅读

摘要：在子组件构造函数中订阅变化设置回调函数赋值给实视图更新匿名空密码中更新。利用在中某个到数据携带在对象的其他属性里，把数据更新从视图传递到姓名密码登录一定要在目录中导入文件这样就可以用原生实现组件之间数据共享。

redux是一个提供组件之间数据共享，管理处理的模块，在react组件中使用十分广泛，如何在react组件中实现数据共享管理？

redux数据管理的基本原理

1.利用store存储数据信息，利用store.getState()得到当前的状态值
导入redux中的createStore方法,创建一个store

import {createStore} from "redux"
const store = createStore()

2.state是store某一个时刻的数据值，store里面的数据变更会触发store.subscribe中回调函数，在里面设置setState引发view更新
3.定义action类型type和携带的数据，action是一个对象里面必须有type属性,它标识了action类型名称，也可以用函数生成action

 const action= {
        type: "CHANGE",
        data:"data"
    }
    //another way to create a action with function
    function actionsCreator(obj) {
    return {
        type: "CHANGE",
        name: obj.name,
        pass: obj.pass
    }
}

4.view中触发store改变。store.dispatch(action)给dispatch方法传入action来更新store中数据（dispatch是触发更新，action是定义更新类型，action类似于定义domEvent中的事件类型click 、onload、onchange······有很多类型,但是触发还需要调用store.dispatch）
5.在createStore中传入一个函数作为参数（必须），这个函数是reducer，定义dispatch某个action后state针对这个action如何更新.
reducer(initialState,action)。由于它的功能是根据初始state和action类型生成更新后的state,它接收初始initialState,action作为参数

下面是个简单的实例

功能
两个组件一个UShow 一个UInput
两者之间共享redux >store里面的数据，一个用来展示，一个用来改变store里面的数据。
方法步骤

新建一个util/redux.js文件存放store共有数据,相关代码

1.定义store

//redux.js
import {createStore} from "redux"
const store = createStore(reducer)

2.定义某个action被dispatch后的state变化规则(这个代码必须在createStore定义store前面)
下面代码含义为如果acttion类型是CHANGE那么就返回action对象中的name和pass,借此更新state

const reducer = (initialState = {
    name: "mayun",
    pass: "asd"
}, actions) => {
    switch (actions.type) {
        case "CHANGE":
            return {
                name: actions.name,
                pass: actions.pass
            }
        default:
            return initialState
    }
}

3.定义action对象，即什么类型的action会被分发，也可以在其中携带用户自定义的数据（我们定义的是pass和name）。这里我们用一个函数来生成这个action对象，本质和直接定义action对象没啥区别

function actionsCreator(obj) {
    return {
        type: "CHANGE",
        name: obj.name,
        pass: obj.pass
    }
}
export { actionsCreator ,const store}

4.用store.subscribe()触发view更新(在子组件UShow中实现)。

定义一个MyWrap组件作为容器，定义UInput UShow作为它的子组件

const MyWrap=()=>(

  
  

)
ReactDOM.render(,document.getElementById("example"))

获取store数据。在子组件UShow 构造函数constructor中订阅state变化,设置回调函数赋值给this.state实视图更新

class Ushow extends React.Component{
    constructor(...args){
    super(...args)
    this.state={
      name:"匿名",
      pass:"空密码"
    }
      store.subscribe(()=>{
    this.setState({
      name:store.getState().name,
      pass:store.getState().pass
    })

  })
}
render(){
  return (
      
name:{this.state.name}
 pass:{this.state.pass}
  
  )
}
}

view UInput中更新store。利用dispatch在UInput 中dispatch 某个action到store（数据携带在action对象的其他属性里），把数据更新从视图view传递到store

class UInput extends React.Component{
  sure(){
    store.dispatch(actionsCreator({name:this.refs.name.value,pass:this.refs.pass.value}))
  }
  render(){
    return(
    
    
   姓名:
   密码:
   
  
  
    )
  }
}

一定要在目录中导入redux文件import {store ,actionsCreator} from "../util/redux.js"

这样就可以用原生redux实现react组件之间数据共享。

云服务器 GPU云服务器 react-redux React_Redux_Appointm react-router-redux 在php中使用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82976.html

React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

nihao 2019-08-22 18:50 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

chenatu 2019-08-02 10:57 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

icyfire 2019-08-30 15:54 评论0 收藏0
玩转 React（七）- 组件之间的数据共享

摘要：函数属性或者说事件在组件之间通信过程中是必不可少的，但是切莫让它影响了大家对单向数据流这一概念的理解。这应该属于一种的使用方式，而且这样做有悖单向数据流原则。上一篇文章玩转 React（六）- 处理事件介绍了在 React 中如何处理用户事件，以及 React 事件机制与原生 DOM 事件的差异和注意的问题，同时也介绍了事件处理函数中 this 的指向问题以及处理的几种方式及其优...

Gu_Yan 2019-08-21 18:00 评论0 收藏0