dva学习--在组件中dispatch一个action

model的数据：


export default {namespace: 'example',   //表示对于整个应用不同的命名空间,以便通过this.props.example访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重state: {num:1},     //表示当前的example中的state状态，这里可以给初始值，这里num初始为1subscriptions: {setup({ dispatch, history }) {  // 订阅，这个实际用的少，表示监听当前state的变化},},effects: {},//用来保存更新state值 上面的put方法调用这里的方法reducers: {},};

那么在组件中怎么分发数据呢，首先需要使用connect连接数据以及传递dispatch，如下：

import React from "react";
import {Component} from 'react';
import { connect } from "dva"; //从dva中导入connect
import {Button} from "antd";class Counter extends Component {constructor(props){super(props)}  //做dispatch分发的方法，相当于做一个请求add = ()=>{const {num,dispatch} = this.props.example;let param = 2 + num;  //在原有的数据上加2dispatch({type: 'example/addByOne',  //这里的example是model的命名空间，"/"后面的表示model中effect的异步方法名param:param                  //这个表示要传递参数，当然这里可以是一个方法，作为回调方法});}render (){return (<div><div><Button onclick={this.add()}>增加</Button></div>               <p> this.props.example.num</p> //如这里就获取到了model定义的num数据了</div>)}
}
const mapStateToProps = (state) =>{return {example：state.example, //这里的example表示后面用this.props.example获取state（根节点）中exmpale命名空间（model的example.js中的state所有数据）的数据}
}
export default connect (mapStateToProps)(Counter) //通过这种方式来把model层的数据传递到当前组件了

如上面所示，那么怎么在model层添加方法做异步处理。重新在model文件的example.js添加addByOne方法

如下：


export default {namespace: 'example',   //表示对于整个应用不同的命名空间,以便通过this.props.example访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重state: {num:1},     //表示当前的example中的state状态，这里可以给初始值，这里num初始为1subscriptions: {setup({ dispatch, history }) {  // 订阅，这个实际用的少，表示监听当前state的变化},},effects: { //这里是做异步处理的*addByONe({ param}, { call, put }) { //param是从组件router传递过来的参数,这里就是上面定义的2//这里的call方法可以使用param参数传递给后台程序进行处理这里，也可以调用service层的方法进行调用后端程序，//这里的put表示存储在当前命名空间example中，通过save方法存在当前state中//在这里可以用ajax调用后台程序处理并返回数据，有很多种处理方式，当然有些处理不需要后端的，可以直接put方法更新state数据yield put({type: 'save',   //这个就是调用reducers中的方法进行跟新当前命名空间state的数据num:param});}},//用来保存更新state值 上面的put方法调用这里的方法reducers: {save(state, action) { //这里的state是当前总的state，这里的action包含了上面传递的参数和typereturn { ...state, ...action.num }; //这里用ES6语法来更新当前state中num的值},},};

如上面的方法可以看到使用addByOne可以做到更新state的数据，当model层的数据变更后，组件中的数据也会跟着改变，每次点击当前的数字都会增加2。

dva学习--在组件中dispatch一个action相关推荐

学习在Unity中创建一个动作RPG游戏
游戏开发变得简单.使用Unity学习C#并创建您自己的动作角色扮演游戏! 你会学到什么学习C#,一种现代通用的编程语言. 了解Unity中2D发展的能力. 发展强大的和可移植的解决问题的技能. 了解 ...
struts2 的一个action中配置多个result input
主题:struts2 的一个action中配置多个result input 讨论下本文来自: 浪曦视频在线作者: hoojo 发表于: 2009-6-4 19:05 阅读: 2005 人收藏看 ...
在Vue组件中获取全局的点击事件
使用场景: 在Vue组件中点击某元素之外的地方移除该元素需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件&q ...
谷歌修复安卓System 组件中的多个 RCE 漏洞
聚焦源代码安全,网罗国内外最新资讯! 编译:奇安信代码卫士团队本周,谷歌发布4月份安全补丁,共修复了50多个漏洞,包括4个严重的安卓 System 组件漏洞. 这四个严重漏洞均可导致远程代码执行后 ...
谷歌修复安卓蓝牙组件中无需用户交互的 bug
聚焦源代码安全,网罗国内外最新资讯! 编译:奇安信代码卫士团队本周,谷歌修复了安卓蓝牙组件中的一个严重缺陷.如未被修复,则该漏洞可在无需用户交互的情况下遭利用,甚至可被用于自传播蓝牙蠕虫. 谷歌已经 ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
如何在input输入框中加一个搜索的小图片_前端开发困难重重，如何把握机会学习？...
第3天[form表单] 主要内容 Form表单表单元素表单元素的属性 HTML5新增type类型 HTML新增属性学习目标一.Form表单表单在 Web 网页中用来给访问者填写信息,从而能采 ...
Struts2学习(二)：第一个Action
前面我们已经把Struts2的运行环境搭建起来了,下面我们开始创建我们的第一个Action,还是按照Max的教程来,我新创建了如下几个文件: sayHello.jsp: <%@ page lan ...
vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM
1:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? //在vue页面中同时使用v-for与v-if后,打印渲染函数. console.log(app.$optio ...

dva学习--在组件中dispatch一个action

dva学习--在组件中dispatch一个action相关推荐

最新文章

热门文章