第二章react168全家桶從入門到實戰(zhàn)8節(jié)項目lesson

dva+umi的約定掌握生成?掌握redux異步方案-redux-generatorumiGeneratorES6提供的一種異步編程解決方案，語法行為與yieldGenerator函數(shù)里使用，在其他地方會報yieldyield}varhw由于Generator函數(shù)返回的遍歷?對象，只有調(diào)用next方法才會數(shù)。yieldredux-地址 /redux-saga/redux-安裝：npminstall--saveredux-importimportReact,{Component}fromimport{BrowserRouter,Switch,Link,Route}fromimportLoginPagefrom"./LoginPage";importUserPagefrom"./UserPage";importPrivatePagefrom"./PrivatePage";exportdefaultclassRouterPageextends{render(){return(<Routepath="/login"{LoginPage}{/*<Routepath="/user"{UserPage}/><PrivatePagepath="/user"{UserPage}}}importimport{createStore,combineReducers,applyMiddleware}from"redux";importthunkfrom"redux-thunk";constinitialLogin{isLogin:false,loading:false,name:"",error:functionloginReducer(state={...initialLogin},action){switch{casereturnloading:true,return{isLogin:true,}}conststorecreateStore(combineReducers({user:loginReducer}),applyMiddleware(thunk),exportdefaultimportReact,{Component}from"react";import{Redirect}from"react-router-dom";import{connect}from"react-exportdefaultstate=>({loading:{/*login:()=>type:}),login:()=>dispatch=>{dispatch({type:"requestLogin"});setTimeout(()=>{type:},classLoginPageextends{render()const{isLogin,loading,location,login}=if(isLogin)constconst{redirect="/"}=location.statereturn<Redirectto={redirect}}return<buttononClick={login}>{loading"登錄中...":"登錄"}</button>}importReact,{Component}fromimport{Route,Redirect}from"react-router-dom";import{connect}from"react-redux";exportdefaultstate=>({isLogin:classPrivatePageextends{render()const{path,component,isLogin}if(isLogin)returnreturn<Routepath={path}{component}}returnpathname:"/login",state:{redirect:path},}call：調(diào)用異步操作put：狀態(tài)更新takeEvery：做importimport{call,put,takeEvery}from"redux-constUserService{login(name)returnnewPromise((resolve,reject){console.log("omg");setTimeout(()=>{if(name==="{resolve({name:""}else}},//workertry{yieldput({type:"requestLogin"});constres=yieldcall(UserService.login,type:"requestSuccess",}{type:"requestFailure",}}//watchersagafunction*mySaga(){yieldtakeEvery("login",}exportdefaultconstconstinitialLogin=isLogin:false,loading:false,name:"",error:exportdefaultfunctionloginReducer(state=...initialLogin},{console.log("action",action);switch(action.type){return{loading:true,return{isLogin:true,return{isLogin:false,loading:false,}}3.redux-import{createStore,combineReducers,applyMiddleware}from"redux";//importthunkfrom"redux-importcreateSagaMiddlewarefrom"redux-saga";importmySagafrom"./mySaga";importloginReducerfrom"./user.redux";constsagaMiddleware=createSagaMiddleware();conststorecreateStore(combineReducers({user:loginReducer}),//applyMiddleware(thunk),exportdefaultstore;4.importimportReact,{Component}from"react";import{Redirect}from"react-router-dom";import{connect}from"react-exportdefaultstate=>({loading:err:{/*login:()=>type:}),/*login:()=>dispatch{dispatch({type:"requestLogin"});setTimeout(()=>{type:},},login:name=>({type:"login",nameclassLoginPageextends{constructor(props){this.state={name:}setName=event{name:render()const{isLogin,loading,err,location,}=if(isLogin){const{redirect="/"}=location.statereturn<Redirectto={redirect}}const{name}=this.state;return({err&&<inputvalue={name}<buttononClick={()=>{loading"登錄中"登錄}why開箱即用，內(nèi)置react、react-router等式完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期高性能，通過插件支持PWA、以路由為單元的codesplitting開發(fā)啟動快，支持一鍵開啟dll和hard-source-wck-plugin等IE9umi-plugin-與dva數(shù)據(jù)流的深入融合，支持duckdirectory、model的自動加載、codesplitting等等srccomponents組件con?g配置mock數(shù)據(jù)模擬環(huán)境要求：node版本創(chuàng)建：yarncreateumi安裝依賴：yarn或者npm啟動：yarnstart或者umi其他例子：如umi- umiumigpageumiumigpagechannel/index--importrouterfromumi/routerumiumi about:理解入，側(cè)重于展示型交互性邏輯。ModelPageDVAredux、redux-sagareact-router的輕量級前端框statee?ectsubscriptionsrouter namespace：model名空間，只能用字符串。一個大型應用可能包含多個model，通過namespace區(qū)分 reducers：用于修改state，由 是一個純函數(shù)，它接受當前的state及一個action對象。action對象里面可以包含數(shù)據(jù)體（payload）作為入?yún)?，需要返回一個新的state。 務邏輯，也是由action觸發(fā)。但是，它不可以修改state，要通過觸發(fā)action調(diào)用reducer實現(xiàn)對state的間接操 action：是reducers及e?ects的觸發(fā)?，一般是一個對象，形如type:'add',payloadtodo，通過type屬性可以匹配到具體某個reducer或者e?ect，payload屬性則是數(shù)據(jù)體，用于傳送給reducer或e?ect。創(chuàng)建頁面goods.jsumigpagechannel/indeximportimportReact,{Component}from'react';importstylesfrom'./index.less';import{PageHeaderWrapper}from'@ant-{;importconnect}fromCard,Form,Input,Button,Table}constcolumns={title: key:'name',{title:'年齡',key:'age',{title:'住址',key:'city',classChannelextends{componentDidMount(){}search=()=>const{getFieldValue}=ps.form;constname=getFieldValue('name');render()const{form,data}=ps;const{getFieldDecorator}=form;return(<div<Card<Buttontype="primary"<TabledataSource={data}{columns}rowKey={record=>record.id}}}exportdefaultconnect(({channel})=>...channel}),{getChannelData:()=>({type:'channel/getChannelData'}),getChannelDataBySearch:search=>({type:importimport{getChannelData,getChannelDataBySearch}from'@/services/channel.js';constmodel{namespace:'channel',state:{data:effects:*getChannelData({payload},{call,put{constresponse=yieldcall(getChannelData,yieldpayload:response,})

*getChannelDataBySearch({payload},{call,constresponse=call(getChannelDataBySearch,payload);yieldpayload:response,reducers:channelData(state,{payload})return{...state,data:[...payload.data]exportexportdefaultimportimportrequestfrom'@/utils/request';exportasyncfunctiongetChannelData(params){returnrequest('/api/getChannelData',{method:'get',}exportasyncfunction{method:'post',data:params,} const