React+umi+dva 项⽬实战-lesson6

时间：2024-03-19 09:41:47

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

相关文章