React+umi+dva 项⽬实战-lesson6

lesson4-react全家桶及原理解析.mov

项⽬实战

  • 项⽬实战
    • 课堂⽬标
    • 资源
    • 知识要点
    • 起步
    • Generator
    • redux-saga
    • umi
      • why umi
      • dva
      • dva+umi 的约定
      • 安装
      • Umi基本使⽤
      • 理解dva
    • 移动端cra项⽬简介

课堂⽬标

  1. 掌握企业级应⽤框架 - umi
  2. 掌握数据流⽅案 - dva
  3. 掌握⽣成器函数 - generator
  4. 掌握redux异步⽅案 - redux-saga

资源

  1. umi
  2. dva
  3. redux-saga:中⽂、英⽂
  4. generator

知识要点

  1. generator⽤法
  2. redux-saga⽤法
  3. umi⽤法

起步

Generator

Generator 函数是 ES6 提供的⼀种异步编程解决⽅案,语法⾏为与传统函数完全不同,详细参考参考阮⼀峰。

  1. function关键字与函数名之间有⼀个*;
  2. 函数体内部使⽤yield表达式,定义不同的内部状态。
  3. yield表达式只能在 Generator 函数⾥使⽤,在其他地⽅会报错。
function* helloWorldGenerator() {yield 'hello';yield 'world';return 'ending';
}
var hw = helloWorldGenerator();
//执⾏
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());

由于 Generator 函数返回的遍历器对象,只有调⽤ next⽅法才会遍历下⼀
个内部状态,所以其实提供了⼀种可以暂停执⾏的函数。 yield表达式就
是暂停标志。

redux-saga

  • 概述:redux-saga使副作⽤(数据获取、浏览器缓存获取)易于管理、执⾏、测试和失败处理
  • 地址:https://github.com/redux-saga/redux-saga
  • 安装:npm install --save redux-saga
  • 使⽤:⽤户登录

先创建⼀个RouterPage

import React, { Component } from "react";
import { BrowserRouter, Switch, Link, Route } from "react/router-dom";
import LoginPage from "./LoginPage";
import UserPage from "./UserPage";
import PrivatePage from "./PrivatePage";export default class RouterPage extends Component {render() {return (<div><h1>RouterPage</h1><BrowserRouter><Link to="/login">登录</Link><Link to="/user">⽤户中⼼</Link><Switch><Route path="/login" component={LoginPage} />{/* <Route path="/user" component={UserPage} /> */}<PrivatePage path="/user" component={UserPage} />	</Switch></BrowserRouter></div>);}
}

创建store/index.js

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";const initialLogin = {isLogin: false,loading: false,name: "",error: "",
};function loginReducer(state = { ...initialLogin }, action) {switch (action.type) {case "requestLogin":return {...initialLogin,loading: true,};case "requestSuccess":return {...state,isLogin: true,loading: false,};default:return state;}
}const store = createStore(combineReducers({ user: loginReducer }),applyMiddleware(thunk),
);export default store;

登录⻚⾯pages/LoginPage.js

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import { connect } from "react-redux";export default connect(//mapStateToPropsstate => ({isLogin: state.user.isLogin,loading: state.user.loading,}),{//mapDispathToProps/* login: () => ({type: "requestSuccess",}), */login: () => dispatch => {dispatch({ type: "requestLogin" });setTimeout(() 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/755044.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

青海200MW光伏项目 35kV开关站图像监控及安全警示系统

一、背景 随着我国新能源产业的快速发展&#xff0c;光伏发电作为清洁能源的重要组成部分&#xff0c;得到了国家政策的大力扶持。青海作为我国光伏资源丰富地区&#xff0c;吸引了众多光伏项目的投资建设。在此背景下&#xff0c;为提高光伏发电项目的运行效率和安全性能&…

【C++】堆区空间的申请和释放--- 2024.3.19

目录 C和C的区别&#xff08;申请堆区空间&#xff09;C中的new和delete结束语 C和C的区别&#xff08;申请堆区空间&#xff09; 在c语言中&#xff0c;在遇到需要申请一块堆区空间时&#xff0c;我们往往会使用malloc申请&#xff0c;使用free进行释放&#xff0c;但是为什么…

数据可信流通:从运维信任到技术信任

1.数据可信流通概念 "数据可信流通"通常指的是确保数据在不同系统、应用程序或者组织之间的传输和交换过程中的可信性、完整性和安全性。在数据流通的过程中&#xff0c;确保数据的真实性、完整性和保密性是非常重要的&#xff0c;尤其是涉及到敏感信息或者重要数据…

GateWay路由规则

Spring Cloud GateWay 帮我们内置了很多 Predicates功能&#xff0c;实现了各种路由匹配规 则&#xff08;通过 Header、请求参数等作为条件&#xff09;匹配到对应的路由 1 时间点后匹配 server:port: 8888 spring:application:name: gateway-servicecloud:nacos:discovery:…

使用verilog写一个模拟比特币挖矿游戏及testbench

设计模拟比特币挖矿游戏需要考虑到以下几个方面: 游戏目标和规则: 确定游戏的目标,例如挖取尽可能多的比特币或达到一定的挖矿目标。确定游戏的规则,例如通过计算难题来进行挖矿、使用特定的硬件设备等。确定状态及状态转移条件: 确定游戏中可能存在的状态,如等待开始、准…

Vue利用axios发送请求并代理请求

由于浏览器的同源策略&#xff0c;发送请求时常常遇到跨域问题&#xff0c;一种解决办法是让后端配置跨域&#xff0c;还有一种就是使用代理&#xff08;与前端工程一起启动&#xff0c;同一个端口&#xff09;&#xff0c;因为代理不是通过浏览器发送的&#xff0c;所以不受同…

蓝桥杯历年真题省赛java b组 2017年第八届 k倍区间

一、题目 k倍区间 给定一个长度为N的数列&#xff0c;A1, A2, ... AN&#xff0c;如果其中一段连续的子序列Ai, Ai1, ... Aj(i < j)之和是K的倍数&#xff0c;我们就称这个区间[i, j]是K倍区间。 你能求出数列中总共有多少个K倍区间吗&#xff1f; 输入 ----- 第一…

rust - 计算文件的md5和sha1值

本文提供了一种计算文件md5和sha1的方法。 添加依赖 cargo add file-hashing cargo add md-5 cargo add sha1添加功能函数 use file_hashing::get_hash_file; use md5::Md5; use sha1::{Digest, Sha1}; use std::io::Error; use std::path::Path;pub fn md5<P: AsRef<…

TEMU是什么?TEMU自养号测评有什么优势?

一、 TEMU是什么&#xff1f; TEMU是拼多多于海外线的跨境电商平台&#xff0c;“Temu”这个名字的含义也和拼多多的意思相近。Temu跨境电商自上线以来&#xff0c;下载量不断攀升&#xff0c;发展势头一片大好&#xff0c;击穿地板价的商品在欧美市场掀起了一阵狂潮&#xff…

[每日一氵] 双Ubuntu共享网络

以下是我的记录 两台Ubuntu&#xff0c;名为AB A机有两张网卡&#xff0c;其中一个网卡可上网&#xff0c;另一个空着B机有一张网卡 现在AB直连&#xff0c;假设 eth0 是A连接到互联网的接口&#xff0c;而 eth1 是要连接到服务器B的接口。 将两台服务器通过网线直接连接起…

【漫谈】叔本华:不能让自己的头脑成为别人思想的跑马场

1.说明 标题是我自己总结加上的&#xff0c;正文都是节选自《叔本华&#xff1a;怎样读书才有效》&#xff0c;不同版本翻译略有不同。 不能让自己的头脑成为别人思想的跑马场。 2. 节选 1. 有自己的思考 我们读书时&#xff0c;是别人在代替我们思想&#xff0c;我们只不过…

mysql虚拟列Generated Column

目录​​​​​​​ 1、Generated Column简介 生成的列定义具有以下语法&#xff1a; 2、实践 2.1 存储格式为json字段增加索引 2.2 手机号后四位 3、虚拟列索引介绍 3.1 虚拟列索引的限制 3.1.1 Virtal Generated Column 4、阿里云数据库环境是否支持 下期扩展&…

大话适航(一)民航产业

0. 前言 eVTOL、飞行汽车和低空经济已成为热门话题&#xff0c;政府引导资本投入新赛道&#xff0c;也势必会吸引跨界厂商前来淘金。只说民用航空器整机制造&#xff0c;技术最接近的行业是军工&#xff0c;然后是无人机&#xff0c;还有汽车、农业机械等。“互联网”曾经掀起…

数据库应用:Linux 部署 GaussDB

目录 一、实验 1.环境 2.Linux 部署 GaussDB 3.Linux 使用 GaussDB 4.使用 GaussDB 进行表与索引操作 5.使用 GaussDB 进行视图操作 6.使用 GaussDB 进行联表查询 7.使用 GaussDB 进行外键关联 二、问题 1.运行python脚本报错 2. 安装GaussDB 报错 3. install 安装…

语音识别:whisper部署服务器,可远程访问,实时语音转文字(全部代码和详细部署步骤)

Whisper是OpenAI于2022年发布的一个开源深度学习模型&#xff0c;专门用于语音识别任务。它能够将音频转换成文字&#xff0c;支持多种语言的识别&#xff0c;包括但不限于英语、中文、西班牙语等。Whisper模型的特点是它在多种不同的音频条件下&#xff08;如不同的背景噪声水…

[C语言]指针详解一、数组指针、二维数组传参、函数指针

一、数组指针 对一个数组&#xff0c;如果我们想要让一个指针指向这个数组&#xff0c;我们应该如何定义呢?我们知道一个数组定义本来就是一个指针&#xff0c;那为何要多定义一个数组指针呢?我们来看看下面这个代码就理解了 #include <stdio.h> int main() {int arr…

【基础】哪个厂家的零件更标准?

时间限制 : 1 秒 内存限制 : 128 MB 在统计描述中,方差用来计算每一个变量(观察值)与总体均数之间的差异。比如:甲乙 2 个厂商生产某零件,一批零件要求在尺寸合格的情况下,大小越一致越好,由于生产工艺的问题,零件生产厂商生产的零件不可能一模一样。 为了检测甲乙两…

前端结合 react axios 获取真实下载、上传进度

首页确保项目中使用了axios axios ondownloadprogress中total总为零&#xff0c;content-length不返回? 点我查看 Axios Documention npm i axiosyarn add axios以下我们举例接口调用配置说明&#xff1a; 由于接口下载时&#xff0c;不确定文件下载时长&#xff0c;所以直…

AIX系统下挂载ISO镜像

我们需要将AIX的iso文件作为软件包的安装源挂载的系统目录中 首先我们查看系统下有哪些挂载文件 如何挂载一个系统iso镜像文件 loopmount -i /ftp/iso/LK4T_1807_11.iso -o "-V cdrfs -o ro " -m /mnt/iso 需要安装软件直接执行smit就可以了&#xff0c;在smit中…

phpStudy安装thinkCMF8时,如何解决服务器rewrite和APIrewrite不支持的问题

解决步骤&#xff1a; 一&#xff1a;服务器rewrite 点击后面的问号跳转到官方文档链接&#xff1a; 复制红框内的代码 打开phpstudy&#xff0c;找到配置的站点&#xff0c;点击管理&#xff0c;找到伪静态 点击确认保存即可。 phpstudy会自动重启站点。 此时&#xff0c;…