您现在的位置是:首页 > 正文

react-umi-dva的使用

2024-01-30 19:36:05阅读 0

用这个玩意,最起码了解react-redux 和 redux相关的东西,不然有点懵逼

 

开启

@umijs/plugin-dva
引入相关配置信息报错,需要新件models / index  并且暴露出去export default {namespace:'MINGCHENG'} //通过验证后,才会开启,

创建模块

import { Effect, Reducer, Subscription } from 'umi';
import { getHome } from '../server/home'; //异步请求
export interface UserInfoState {
  userName: string;
  num:number
}

export interface UserInfoTypes {
  namespace: 'user';
  state: UserInfoState;
  effects: {
    query: Effect;
  };
  reducers: {
    save: Reducer<UserInfoState>;
    changeName: Reducer<UserInfoState>;
  };
  subscriptions: { setup: Subscription };
}
const userModel: UserInfoTypes = {
  namespace: 'user', //vuex的模块命名空间
  state: {
    //数据集合
    userName: '老朱第一次尝试dva',
    num:1
  },
  effects: {
     //相当于vuex的异步action方法集合,或者等同于react-sage的使用方式
    //异步action方式
    *query(action, { call, put, select }) {
      // * yield 看做async await就行 es6遇到yield会阻断函数执行,等待某个步骤完成后再执行
      //call 调用一个异步方法,一般是异步请求,其参数可以看做原生call方法,第一个参数是异步方法名,第二个参数是异步方法所需要的参数
      let res = yield call(getHome, action.payload);
      console.log(res);
      //select 当需要从state中获取数据时,可以从这里获取.传一个回调函数,回调函数的参数就是state,返回所需要的值,这里注意state.user,user是当前的命名空间,然后才是当前空间下对应的数据
      const num = yield select((state: any) => state.user.userName);
      console.log(name, '这是异步监听的数据');
      // put 当获取完异步数据.即可发送dispatch出去,修改state内的数据,这里type不用写成user/changeName 会提示不要以命名空间做前缀,直接写当前模块内的dispacth方法
      yield put({type:'changeName',payload:num})
    },
  },
  reducers: {
    //相当于vuex 内的mutation内的同步action方法 或者等同于react-redux的reducer state是数据,action包含type和payload,可以根据type去做相应数据的CRUD
    save(state, actions) {
      //state 当前命令空间内的数据 
      //actions type 和 payload的{}
      //react数据是不可变数据,所以返回一个新的数据回去,用序列化,或者解构copy出新的数据也可以
      let newstate = JSON.parse(JSON.stringify(state));
      newstate.userName = actions.payload;
      return newstate;
    },
    changeName(state, actions) {
      let newstate = JSON.parse(JSON.stringify(state));
      newstate.num=actions.payload
      return newstate;
    },
  },
  subscriptions: {
    //动态监听,当路由变化,或者其他数据变化,disptch出去一个值
    //可对比vuex的subscribe,vuex的subscribe监听某个mutation触发后执行的其他的操作
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === '/home') {
          dispatch({ //重新获取用户数据
            type: 'query',
            payload: 2,
          });
        }
      });
    },
  },
};
export default userModel;

组件使用 

import React from 'react'
import {connect} from 'umi'
 
export interface State {
    num:number
}   
 
class Home extends React.Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = { num:1  };
    }
    render() { 
        return ( 
            <>
            <p>{this.props.num}</p>
            </>
         );
    }
}
 
export default connect(((state: any) => ({ num: state.user.num})))(Home);

 

网站文章

  • 【数据结构与算法】插值查找算法、斐波那契查找算法(黄金分割法)的介绍和程序实现

    【数据结构与算法】插值查找算法、斐波那契查找算法(黄金分割法)的介绍和程序实现

    插值查找算法类似二分查找算法。二分查找算法的mid取值为mid=low+high2=low+12(high−low)mid=2low+high​=low+21​(high−low)而插值查找算法,并不是取low和high中间的index,而是根据findValue的值的大小来确定mid,findValue值偏大,则mid偏大,findValue值偏小,则mid偏小,这样能缩小查找的范围。

    2024-01-30 19:35:58
  • Mac帆软生成docker镜像

    Mac帆软生成docker镜像

    2024-01-30 19:35:53
  • CentOS7安装MySQL

    CentOS7安装MySQL

    MySQL的下载地址:https://dev.mysql.com/downloads/mysql/1.由于企业版的要收费,这里就下载社区版的MySQL1-1.按红圈的下载2.下载完成后,上传到服务器[root@node1 ~]# rz #上传文件[root@node1 ~]# ls ...

    2024-01-30 19:35:26
  • Set对象

    Set对象

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects 可查看网站 Set对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。 set对象中有很多的方法 1、Set.prototype.add() add()方法用来向一个Set对象的末尾添加一个指定的值。 var...

    2024-01-30 19:35:20
  • APK调试

    APK调试

    源码的情况下,对APK的动态调试主要分为两种:smali汇编动态调试arm汇编动态调试Smali汇编动态调试对smali汇编的动态调试主要分为两种:使用ida进行调试使用IDE + apktool进行调试Eclipse + apktoolAndroid studio + apktoolIdea + apktool…使用jeb2.2以后版本调试IDA 调试smali...

    2024-01-30 19:35:13
  • 使用SourceMonitor完成静态测试

    使用SourceMonitor完成静态测试

    摘要:软件测试作为软件开发中的重要环节,其重要程度不言而喻,从需求定制到软件交付,不仅要保证软件在功能上的要求,同时也要满足性能需求。毕竟,客户体验才是软件赖以生存的基石。本篇文章主要讲述了如何使用SourceMonitor这款软件完成最基本的静态测试,整个流程比较简单。一、软件安装由于本次实验是基于SourceMonitor这款软件完成的,所以需要先下载相应的安装包,网上搜...

    2024-01-30 19:35:05
  • 南艺附中 计算机音乐,南京艺术学院2018年音乐类本科招生考试科目及内容

    南京艺术学院2018年音乐类本科招生考试科目及内容考试科目及内容招生专业及方向考试科目、内容音乐表演(声乐演唱)初试:①演唱(自选歌曲1首)②面试复试:①演唱(自选歌曲2首,曲目不同于初试)②基本乐理...

    2024-01-30 19:34:38
  • Toad for Oracle工具的使用(二)

    Toad for Oracle工具的使用(二)

    脚本管理器 (Script manager): 通过Script Manager,可以对常用的SQL 脚本进行集中管理。还可以做如下工作:

    2024-01-30 19:34:30
  • 翻转棋

    翻转棋

    广搜的问题,重点是位运算的应用。每翻转一个状态就对应一个16位的二进制数。翻转一次就是把某个数上下左右四个位置的棋子都翻转,即0-&gt;1,1-&gt;0。 Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26891 Accepted: 11647

    2024-01-30 19:34:22
  • Linux下Shell实现当文件大于某size时候删除功能

    Linux下Shell实现当文件大于某size时候删除功能

    2024-01-30 19:33:50