項(xiàng)?實(shí)戰(zhàn)

• 項(xiàng)?實(shí)戰(zhàn)
  • 課堂?標(biāo)
  • 資源
  • 知識要點(diǎn)
  • 起步
  • Generator
  • redux-saga
  • umi
    • why umi
    • dva
    • dva+umi 的約定
    • 安裝
    • Umi基本使?
    • 理解dva
  • 移動端cra項(xiàng)?簡介

課堂?標(biāo)

1. 掌握企業(yè)級應(yīng)?框架 - umi
2. 掌握數(shù)據(jù)流?案 - dva
3. 掌握?成器函數(shù) - generator
4. 掌握redux異步?案 - redux-saga

資源

1. umi
2. dva
3. redux-saga：中?、英?
4. generator

知識要點(diǎn)

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

起步

Generator

Generator 函數(shù)是 ES6 提供的?種異步編程解決?案，語法?為與傳統(tǒng)函數(shù)完全不同，詳細(xì)參考參考阮?峰。

1. function關(guān)鍵字與函數(shù)名之間有?個*;
2. 函數(shù)體內(nèi)部使?yield表達(dá)式，定義不同的內(nèi)部狀態(tài)。
3. yield表達(dá)式只能在 Generator 函數(shù)?使?，在其他地?會報錯。

function* helloWorldGenerator() {yield 'hello';yield 'world';return 'ending';
}
var hw = helloWorldGenerator();
//執(zhí)?
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());

由于 Generator 函數(shù)返回的遍歷器對象，只有調(diào)? next?法才會遍歷下?
個內(nèi)部狀態(tài)，所以其實(shí)提供了?種可以暫停執(zhí)?的函數(shù)。 yield表達(dá)式就
是暫停標(biāo)志。

redux-saga

• 概述：redux-saga使副作?（數(shù)據(jù)獲取、瀏覽器緩存獲?。┮子诠芾?、執(zhí)?、測試和失敗處理
• 地址：https://github.com/redux-saga/redux-saga
• 安裝：npm install --save redux-saga
• 使?：?戶登錄

先創(chuàng)建?個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>);}
}

創(chuàng)建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(()