React+umi+dva 项⽬实战-lesson6

项⽬实战

• 项⽬实战
  • 课堂⽬标
  • 资源
  • 知识要点
  • 起步
  • 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());
1
2
3
4
5
6
7
8
9
10
11
12

由于 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>
		 );
	 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

创建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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

登录⻚⾯pages/LoginPage.js

import React, {
    Component } from "react";
import {
    Redirect } from "react-router-dom";
import {
    connect } from "react-redux";

export default connect(
	//mapStateToProps
	state => ({
   
		isLogin: state.user.isLogin,
		loading: state.user.loading,
	}),
	{
   
		//mapDispathToProps
		/* login: () => ({
   
			type: "requestSuccess",
		}), */
		login: () => dispatch => {
   
			dispatch({
    type: "requestLogin" });
			setTimeout(() 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25