dva框架简单描述使用

　　　　首先传统的create-router-app脚手架生成的脚手架我们写仓库的时候用reducers进行调用还有thunk进行异步操作的时候，需要多层函数进行调用，这样会让我们代码进行维护的时候变得麻烦，然后dva这款框架就弥补了我们这方面的问题  下面给大家介绍下这款脚手架的一些个人用法把

　　框架刚下载下来后是routes这个文件夹放的路由页面内容的  然后个人把其改成了RouteView和RouteConfig两篇配置文件了，其中RouteView是写页面路由展示的

RouteConfig是写路由配置信息的 类似于vue的路由配置，

然后在router.js这篇文件引入这两篇文件引进后直接进行循环 然后就能实现路由的展示了  代码展示如下

　　RouteView文件

 import React, { Component } from 'react'

 import { Switch, Route, Redirect } from "dva/router"

 export default class RouteView extends Component {
     render() {
         return (
             <Switch>
                     {this.props.children.map((item, index) => {
                         if (item.redirect) {
                             return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
                         } else {
                             return <Route key={index} path={item.path} render={(props) => {
                                 //console.log(props)
                                 return <item.component {...props} children={item.children}></item.component>
                             }}></Route>
                         }
                     })}

             </Switch>
         )
     }
 }

　　RouteConfig文件

 import React from "react";

 const RouteConfig=[
     {
         path:"/main",
         component:React.lazy(()=>import("../views/main/index.jsx")),
         children:[
             {
                 path:"/main/home",
                 component:React.lazy(()=>import("../views/main/home/index.jsx"))
             },{
                 path:"/main/list",
                 component:React.lazy(()=>import("../views/main/list/index.jsx"))
             },{
                 path:"/main",
                 redirect:"/main/home"
             }
         ]
     },{
         path:"/detail/:id",
         component:React.lazy(()=>import("../views/detail/index.jsx")),
     },{
         path:"/",
         redirect: "/main"
     }
 ]

 export default RouteConfig;

　　router.js文件

 import React ,{Suspense}from 'react';
 import { Router} from 'dva/router';

 // import Main from "./views/main/index";

 // import Home from "./views/main/home/index"

 // import List from "./views/main/list/index"
 import RouteView from "./routes/RouteView"
 import RouteConfig from "./routes/RouteConfig"
 function RouterConfig({ history }) {

   return (
     <Router history={history}>
         <Suspense fallback={<div>loading...</div>}>
             <RouteView children={RouteConfig}></RouteView>
         </Suspense>

       {/* <Switch>
         <Route path="/main" exact component={Main} />
         <Route path="/main/home" exact component={Home} />
         <Route path="/main/list" exact component={List} />
         <Redirect from="/" to="/main"></Redirect>
       </Switch> */}
     </Router>
   );
 }

 export default RouterConfig;

在dva中css样式的写法

　全局添加样式

　　

　局部添加样式

　　

　　

重头戏 仓库的用法

　　在脚手架中生成的是models这个文件夹 ， 作者是想让我们在这个仓库中进行写模块开发的

这里展示一篇写好的仓库

 //引入网络请求文件 然后发送各类网络请求

 import * as Api from "../services/index"

 //首页购物车数据列表

 //初始化数据
 const state = {
   shoping: [], //购物列表的初始数据
   buyList: [], //购物车列表数据
 }

 //同步函数方法

 const reducers = {
   getShopList(state, action) {
     //console.log(state, action)
     let newState = JSON.parse(JSON.stringify(state));
     newState.shoping = action.payload.list.map(item => {
       item.num = 0;
       return item
     });
     //console.log(newState);
     return {
       ...newState
     };
   },
   addBuyList(state, action) {
     //购物车列表添加数据
     let newState = JSON.parse(JSON.stringify(state));
     newState.buyList = [...action.data];
     //console.log(newState.buyList,"仓库中的购买列表")
     return {
       ...newState
     };
   }
 }

 //异步方法

 const effects = {
   //payload的意思是进行传参的  call调用异步网络请求 put调用上面的同步方法
   * getShopListAsync({
     payload
   }, {
     call,
     put
   }) { // eslint-disable-line
     //发送网络请求  如果payload需要传参的话直接在call第二个参数写就可以了
     let results = yield call(Api.getShopList)
     let data = results.data;
     console.log(data);
     if (data.list.length) {
       //调用上面的同步方法来改变数据
       yield put({
         type: 'getShopList',
         payload: data
       });
     }

   },
 };

 export default {
   //命名空间
   namespace: 'shop',
   //数据
   state,

   subscriptions: {
     setup({
       dispatch,
       history
     }) { // eslint-disable-line
     },
   },
   //异步函数
   effects,
   //同步函数
   reducers,

 };

在组件中使用情况

　　获取仓库的数据

　　　　

　　　　

　　调用仓库中的方法也就是同步或者异步的函数

　　　　

最重要的是将仓库展示出来

后端模拟接口的写法

　　在mock下面新建一篇js用来写接口

　　　　

　　

　　具体写法

　　　　

　　也可写成

　　　

　　　然后引用写好的数据

　　　　在.roadhogrc.mock.js这篇文件引入

　　　　　　

然后services文件夹下写个js就可以进行发送请求获取数据了

　　　　　　

---

代码优化部分

　　.roadhogrc.mock.js文件

　　　　　　可以不用每次在mock创建一个数据就进行修改了 会自动循环引入

　　　　

　　　　仓库部分代码优化

　　　　　　在models这个文件夹下新建造一个index.js作为仓库的主要出口文件

　　　　　　　　

　　然后在index引入的话

　　　　

redux-actions管理模块

　　新建一个actions文件 然后在里面写个index.js  将我们用到的所有type提出来

　　　　

　　　　使用方法

　　　　　　

　　　　　　

---

引入antd的按需加载和进行跨域设置

　　将.webpackrc设置成.webpackrc.js文件然后在进行下面配置

知识点引导

　使用require.context实现前端工程自动化

　redux-actions的使用

本文demoGitHub地址为    https://github.com/qiang-chen/dva-app