dva中简单的数据流图

代码揽虹客
• 阅读 3317

dva中简单的数据流图:
dva中简单的数据流图

State : 一个对象,保存整个应用的状态
View : React组件构成的视图层
Action : 一个对象,描述事件。
connect方法 : 一个函数,绑定State到的View
dispatch方法 : 一个函数,发送Action到State

先来看个简单的例子:
描述:更新名称。
View视图层:

import React, { Component } from 'react';
import UserUI from '../components/userUI'
import {connect} from 'dva'
class UserPage extends Component{
    handlerBack = () =>{
        console.log(this.props);
        this.props.history.push('/')
    }
    handlerChangeName = () =>{      
        console.log(this.props);
        this.props.dispatch({    // 通过dispatch函数,发送Action到State,然后更改视图 
            type:'IndexText/setName',
            payLoad:{
                name:'柠檬啊'
            }
        })
    }
    render(){
        console.log(this.props)
        return(
            <div>
                我是user页
                <button onClick={this.handlerBack}>回首页</button>
                <UserUI></UserUI>
                <div>
                   {this.props.msg} <br/>
                    {this.props.state.name}
                </div>
                <button onClick={this.handlerChangeName}>更改名字</button>
            </div>
        )
    }
}

export default connect(mapStateToProps)(UserPage);     // 使用connect将State绑定到View视图

Model/IndexText.js

export default{
    namespace:'IndexText',
    state:{
        name:'西柚'
    },
    reducers:{
        setName(state,payLoad){
            console.log('running',payLoad.payLoad.name)
            let _state = JSON.parse(JSON.stringify(state));
            _state.name = payLoad.payLoad.name;
            return _state;
        }
    }
}

更多详细的参考Dva官网


觉得对自己有帮助就点个赞👍呀。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
Apache Synapse 远程代码执行漏洞(CVE
!(https://oscimg.oschina.net/oscnet/435fc4cde65d4aee9a2efca3080cb89e.png)0x00事件背景ApacheSynapse是一个简单、轻量级的高性能企业服务总线(ESB),它是在ApacheSoftwareFoun
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Bypass ngx_lua_waf SQL注入防御(多姿势)
0x00前言ngx\_lua\_waf是一款基于ngx\_lua的web应用防火墙,使用简单,高性能、轻量级。默认防御规则在wafconf目录中,摘录几条核心的SQL注入防御规则:select.(from|limit)(?:(union(.?)select))(?:from\Winformation_schema\W)这边
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
代码揽虹客
代码揽虹客
Lv1
找一方净土,守一份剩下流年,看一段岁月安好。
文章
7
粉丝
0
获赞
0