电商网站开发用什么语言,变现流量推广app,app开发有限公司,新型产品设计lesson4-react全家桶及原理解析.mov 项⽬实战 项⽬实战 课堂⽬标资源知识要点起步Generatorredux-sagaumi why umidvadva+umi 的约定安装Umi基本使⽤理解dva移动端cra项⽬简介课堂⽬标 掌握企业级应⽤框架 - umi掌握数据流⽅案 - dva掌握⽣成器函数 - generator掌握redux异步⽅… lesson4-react全家桶及原理解析.mov 项⽬实战
项⽬实战 课堂⽬标资源知识要点起步Generatorredux-sagaumi why umidvadva+umi 的约定安装Umi基本使⽤理解dva 移动端cra项⽬简介 课堂⽬标
掌握企业级应⽤框架 - umi掌握数据流⽅案 - dva掌握⽣成器函数 - generator掌握redux异步⽅案 - redux-saga资源
umidvaredux-saga：中⽂、英⽂generator知识要点
generator⽤法redux-saga⽤法umi⽤法起步
Generator
Generator 函数是 ES6 提供的⼀种异步编程解决⽅案，语法⾏为与传统函数完全不同，详细参考参考阮⼀峰。
function关键字与函数名之间有⼀个*;函数体内部使⽤yield表达式，定义不同的内部状态。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 (divh1RouterPage/h1BrowserRouterLink to="/login"登录/LinkLink to="/user"⽤户中⼼/LinkSwitchRoute 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(()
