describe the use of simple frame dva

　　　　First, the traditional time of create-router-app scaffolding scaffolding generated we write warehouse when there thunk call with reducers asynchronous operation, require multiple layers of function calls, which would allow us to maintain the code becomes troublesome when, then dva this framework to make up introduces of our problems in this regard some of the personal usage of this scaffolding

　　After the frame is just download folder routing routes this page content and then put it into a RouteView the personal and RouteConfig two configuration files, which are written RouteView page routing show

RouteConfig routing configuration information is written vue route similar to the configuration,

Then router.js this file to introduce these two documents after the introduction of direct cycle and then will be able to achieve route shows the code shown below

　　RouteView file

 1 import React, { Component } from 'react'
 2 
 3 import { Switch, Route, Redirect } from "dva/router"
 4 
 5 export default class RouteView extends Component {
 6     render() {
 7         return (
 8             <Switch>
 9                     {this.props.children.map((item, index) => {
10                         if (item.redirect) {
11                             return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
12                         } else {
13                             return <Route key={index} path={item.path} render={(props) => {
14                                 //console.log(props)
15                                 return <item.component {...props} children={item.children}></item.component>
16                             }}></Route>
17                         }
18                     })}
19                
20             </Switch>
21         )
22     }
23 }

View Code

　　RouteConfig file

 1 import React from "react";
 2 
 3 const RouteConfig=[
 4     {
 5         path:"/main",
 6         component:React.lazy(()=>import("../views/main/index.jsx")),
 7         children:[
 8             {
 9                 path:"/main/home",
10                 component:React.lazy(()=>import("../views/main/home/index.jsx"))
11             },{
12                 path:"/main/list",
13                 component:React.lazy(()=>import("../views/main/list/index.jsx"))
14             },{
15                 path:"/main",
16                 redirect:"/main/home"
17             }
18         ]
19     },{
20         path:"/detail/:id",
21         component:React.lazy(()=>import("../views/detail/index.jsx")),
22     },{
23         path:"/",
24         redirect: "/main"
25     }
26 ]
27 
28 export default RouteConfig;

View Code

　　router.js file

 1 import React ,{Suspense}from 'react';
 2 import { Router} from 'dva/router';
 3 
 4 
 5 // import Main from "./views/main/index";
 6 
 7 // import Home from "./views/main/home/index"
 8 
 9 // import List from "./views/main/list/index"
10 import RouteView from "./routes/RouteView"
11 import RouteConfig from "./routes/RouteConfig"
12 function RouterConfig({ history }) {
13   
14   return (
15     <Router history={history}>
16         <Suspense fallback={<div>loading...</div>}>
17             <RouteView children={RouteConfig}></RouteView>
18         </Suspense>
19       
20       {/* <Switch>
21         <Route path="/main" exact component={Main} />
22         <Route path="/main/home" exact component={Home} />
23         <Route path="/main/list" exact component={List} />
24         <Redirect from="/" to="/main"></Redirect>
25       </Switch> */}
26     </Router>
27   );
28 }
29 
30 export default RouterConfig;

View Code

In dva written in css styles

　Adding global style

　Adding local style

The highlight of warehouse usage

　　Scaffolding is generated in this folder models, the authors want us to write modules developed in this warehouse

Written show a warehouse here

1  // introduction request file and transmits various types of network requests 
2  
. 3 Import of Api from AS * "../services/index"
 . 4  
. 5  // Home Shopping Cart data list 
. 6  
. 7  // initialization data 
. 8 const State = {
 . 9    Shoping : [], // initial data shopping list 
10    buyList: [], // cart list data 
11  }
 12 is  
13 is  // synchronization function method 
14  
15 const the reducers = {
 16    getShopList (State, Action) {
 . 17      // Console .log (State, Action) 
18 is      the let = newState TheThe JSON.parse (the JSON.stringify (State));
 . 19      newState.shoping = action.payload.list.map (Item => {
 20 is        item.num = 0 ;
 21 is        return Item
 22 is      });
 23 is      // the console.log ( newState The); 
24      return {
 25        ... newState The
 26 is      };
 27    },
 28    addBuyList (State, Action) {
 29      // cart add data list 
30      the let newState The = the JSON.parse (the JSON.stringify (State));
 31 is      = newState.buyList [... action.data];
 32      //console.log (newState.buyList, "later in the list of the warehouse") 
33 is      return {
 34 is        ... newState The
 35      };
 36    }
 37 [  }
 38 is  
39  // asynchronous method 
40  
41 is const Effects = {
 42 is    // payload mean call for an asynchronous network call parameter passing method call above synchronous put request 
43 is    * getShopListAsync ({
 44 is      payload
 45    }, {
 46 is      call,
 47      put
 48    }) { // eslint-disable-Line 
49      // network request if payload need to pass parameters, then you can write directly to the second argument in the call
50      the let Results = the yield Call (Api.getShopList)
 51 is      the let Data = results.data;
 52 is      the console.log (Data);
 53 is      IF (data.list.length) {
 54 is        // call the above data synchronization method to change 
55        the yield PUT ({
 56 is          type: 'getShopList' ,
 57 is          payload: Data
 58        });
 59      }
 60  
61 is    },
 62 is  };
 63 is  
64  
65  
66  
67 Export default {
 68    // namespace 
69   namespace: 'Shop' ,
 70    // data 
71 is    State,
 72  
73 is    Subscriptions: {
 74      Setup ({
 75        dispatch,
 76        History
 77      }) { // eslint-disable-Line 
78      },
 79    },
 80    // asynchronous function 
81    Effects,
 82    // synchronization function 
83    the reducers,
 84  
85 };