12課react全家桶02收集

1、React全家桶2課堂目標(biāo)1. 掌握umi2. 掌握redux解決方案-dva3. 掌握generator4. 掌握redux-saga資源1. umi2. dva3. redux-saga：中文、英文4. generator知識(shí)要點(diǎn)1. umi架構(gòu)思想和用法2. 狀態(tài)管理解決方案dva起步redux-saga使用安裝：npm install -save redux-saga使用：用戶(hù)登錄redux-saga實(shí)現(xiàn)創(chuàng)建./store/sagas.js開(kāi)課吧web全棧架構(gòu)師import call, put, takeEvery from "redux-saga/effects"

2、/ 模擬登錄const UserService = login(uname) return new Promise(resolve, reject) => setTimeout() => if (uname = "Jerry") resolve( id: 1, name: "Jerry", age: 20 ); else reject("用戶(hù)名或 錯(cuò)誤");, 1000);修改user.redux.jsexport const user = (state = isLogin: false, loading: false,

3、error: "" , action) => switch (action.type) case "requestLogin":return isLogin: false, loading: true, error: "" ; case "loginSuccess":return isLogin: true, loading: false, error: "" ; case "loginFailure":return isLogin: false, loading: f

4、alse, error: action.message ; default:return state;export function login(uname) return type: "login", uname ;/ export function login() / return dispatch => / dispatch( type: "requestLogin" );/ setTimeout() => / dispatch( type: "login" );/ , 2000);/ ;/ redux-saga，.

5、/store/index.js開(kāi)課吧web全棧架構(gòu)師);/ worker Sagafunction* login(action) try yield put( type: "requestLogin" );const result = yield call(UserService.login, action.uname); yield put( type: "loginSuccess", result ); catch (message) yield put( type: "loginFailure", message );funct

6、ion* mySaga() yield takeEvery("login", login);export default mySaga;import user from "./user.redux"import createSagaMiddleware from "redux-saga" import mySaga from "./sagas"const sagaMiddleware = createSagaMiddleware(); const store = createStore(combineReducer

7、s( user ), applyMiddleware(logger, sagaMiddleware);sagaMiddleware.run(mySaga); export default store;使用狀態(tài)，RouteSample.jsconst Login = connect( state => (isLogin: state.user.isLogin, loading: state.user.loading, error: state.user.error / 登錄錯(cuò)誤), login )( location, isLogin, login, loading, error ) =&

8、gt; / 登錄錯(cuò)誤const redirect = location.state.redirect | "/"const uname, setUname = useState(""); / 用戶(hù)名輸入狀態(tài)if (isLogin) return <Redirect to=redirect />return (<div><p>用戶(hù)登錄</p><hr />/* 顯示錯(cuò)誤 */error && <p>error</p>/* 輸入用戶(hù)名 */<inputty

9、pe="text"onChange=e => setUname(e.target.value) value=uname/>/* 登錄傳參 */<button onClick=() => login(uname) disabled=loading>loading ? "登錄中." : "登錄"</button></div>););#開(kāi)課吧web全棧架構(gòu)師React企業(yè)級(jí)應(yīng)用程序框架 - Umi全局安裝umi： npm install umi -g新建 index頁(yè)umi g page

10、 index umi g page about起服務(wù)看效果 umi dev動(dòng)態(tài)路由：以$開(kāi)頭的文件或目錄/ 創(chuàng)建users/$id.js，內(nèi)容和其他頁(yè)面相同，顯示一下傳參export default function(props) return (<div><h1>user id: props.match.params.id</h1></div>);嵌套路由/ 創(chuàng)建父組件 umi g page users/_layout export default function(props) return (<div><h1>Pag

11、e _layout</h1><div>props.children</div></div>)/ 創(chuàng) 組件 umi g page users/index頁(yè)面跳轉(zhuǎn)開(kāi)課吧web全棧架構(gòu)師/ 用戶(hù)列表跳轉(zhuǎn)至用戶(hù)詳情頁(yè), users/index.jsimport Link from "umi/link" import router from "umi/router"export default function() / 模擬數(shù)據(jù)const users = id: 1, name: "tom" ,

12、id: 2, name: "jerry" ; return (<div className=styles.normal><h1>用戶(hù)列表</h1><ul>users.map(u => (/ 式/ <li key=u.id>/ <Link to=/users/$u.id></Link>/ </li>/ 命令式<li key=u.id onClick=()=>router.push(/users/$u.id)></li>)&

13、lt;/ul></div>);配置式路由：默認(rèn)路由為 式，根據(jù)pages下面內(nèi)容自動(dòng)生成路由，業(yè)務(wù)復(fù)雜后仍需配置路由/ 創(chuàng)建config/config.js export default routes: path: "/", component: "./index" ,path: "/users",component: "./users/_layout", routes: path: "/users/", component: "./users/index"

14、 , path: "/users/:id", component: "./users/$id" ;404頁(yè)面：創(chuàng)建404頁(yè)面： umi g page NotFound添加不帶path的路由配置項(xiàng)： component: './NotFound'權(quán)限路由:通過(guò)配置路由的 Routes 屬性來(lái)實(shí)現(xiàn)path: "/about", component: "./about",Routes: "./routes/PrivateRoute.js" / 這里相對(duì)根目錄，文件名后綴不能少創(chuàng)建./r

15、outes/PrivateRoute.js開(kāi)課吧web全棧架構(gòu)師創(chuàng)建登錄頁(yè)面： umi g page login ，并配置路由： path: "/login", component: "./login" export default function() return (<div className=styles.normal><h1>Page login</h1></div>);引入antd添加antd： npm install antd -S添加 umi-plugin-react: npm instal

16、l umi-plugin-react -DWin10 限錯(cuò)誤，通過(guò)管理員權(quán)限打開(kāi)vscode 修改./cong/cong.jsplugins: 'umi-plugin-react', antd: true,import Button from 'antd' export default () => return <div><Button>登錄</Button></div>引入dva開(kāi)課吧web全棧架構(gòu)師import Redirect from "umi/redirect"export de

17、fault props => / 50%概率需要去登錄頁(yè)面if (Math.random()>0.5) return <Redirect to="/login" />return (<div><div>PrivateRoute (routes/PrivateRoute.js)</div>props.children</div>);配置dvaexport default plugins: 'umi-plugin-react', antd: true,dva: true,/ .創(chuàng)建m ：維護(hù)

18、頁(yè)面數(shù)據(jù)狀態(tài)新建./m s/goods.jsexport default namespace: 'goods', / m 名空間，區(qū)分多個(gè)mstate: title: "web全棧" , title: "java架構(gòu)師" , / 初始狀態(tài)effects:, / 異步操作reducers: / 更新?tīng)顟B(tài) 使用狀態(tài)：創(chuàng)建頁(yè)面goods.js： umi g page goods ，并配置路由： path: "/goods", component: "./goods" import React, Compo

19、nent from "react" import Button, Card from "antd" import connect from "dva"connect( state => (goodsList: state.goods / 獲取指定命名空間的模型狀態(tài)),addGood: title => (type: "goods/addGood", / action的type需要以命名空間為前綴+reducer名稱(chēng)payload: title )class Goods extends Component

20、 render() return (<div>/* 商品列表 */<div>ps.goodsList.map(good => return (<Card key=good.title>開(kāi)課吧web全棧架構(gòu)師<div>good.title</div></Card>);)<div><Button onClick=() =>ps.addGood("商品" + new Date().getTime()>添加商品</Button>&l

21、t;/div></div></div>);export default Goods;更新模型src/m s/goods.jsexport default reducers: addGood(state, action) return .state, title: action.payload.title;數(shù)據(jù)mock：模擬數(shù)據(jù)接口mock目錄和src平級(jí)，新建mock/goods.jslet data = title:"web全棧",title:"java架構(gòu)師"export default 'get /api/goods': function (req, res) setTimeout() => res.json(