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