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(()