dva入手指南

3,349 阅读4分钟

因为积分商城项目接触dva搭建的项目,由于和以前使用vue框架不同,边完成需求,边学习框架,现对学习过程做一个记录,希望对后来接触dva的小伙伴有所帮助,有什么错误的地方,大家一起纠正。

first of all

照惯例介绍一下dva是什么

dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。

官方解释是这样,在我理解,dva是一个对react进行简单封装,更方便进行开发的react框架。


由于都是框架,我们大部分项目是vue进行的,可能小伙伴们对vue更加熟悉,在后续我也会根据vue进行对比,便于记忆。

1. 安装

dva也使用脚手架进行安装。

$ npm install dva-cli -g 

是不是很熟悉,和vue类似,用法也和vue-cli类似

2. 创建项目

$ dva new dva-quickstart

使用new

3. 启动

$ cd dva-quickstart
$ npm start

本地就跑起来了

4. 安装antd

在使用时我们搭配antd开发,antd为react的ui框架,有了ui框架开发起来更加方便快捷

$ npm install antd babel-plugin-import --save

注意,如果node版本高于5.4.0会出现报错

解决办法: 1.node降版本 2.删除node_modules文件夹

我是node5.6.0,所以

$ npm install antd babel-plugin-import --save
$ npm install

编辑 .webpackrc,使 babel-plugin-import 插件生效。

{
+  "extraBabelPlugins": [
+   ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

目录结构

|- mock
|- node_modules
|- package.json
|- public
|- src
    |- asserts
    |- components
    |- models
    |- routes
    |- services
    |- utils
    |- router.js
    |- index.js
    |- index.css
|- .editorconfig
|- .eslintrc
|- .gitignore
|- .roadhogrc.mock.js
|- .webpackrc
  • mock 存放用于 mock 数据的文件;
  • public 一般用于存放静态文件,打包时会被直接复制到输出目录(./dist);
  • src 文件夹用于存放项目源代码;
    • asserts 用于存放静态资源,打包时会经过 webpack 处理;
    • components 用于存放 React 组件,一般是该项目公用的无状态组件;
    • models 用于存放模型文件
    • routes 用于存放需要 connect model 的路由组件;
    • services 用于存放服务文件,一般是网络请求等;
    • utils 工具类库
    • router.js 路由文件
    • index.js 项目的入口文件
    • index.css 一般是共用的样式
  • .editorconfig 编辑器配置文件
  • .eslintrc ESLint配置文件
  • .gitignore Git忽略文件
  • .roadhogrc.mock.js Mock配置文件
  • webpackrc 自定义的webpack配置文件,JSON格式,如果需要 JS 格式,可修改为 .webpackrc.js

和vue-cli生成的目录结构类似,其中有几个不同点强调一下

  1. model文件类似于vuex中store 用来控制状态
  2. routes文件夹相当于常见的pages,当然,这里也可以改成pages
  3. 多了mock文件夹,如果只进行本地开发,可以用过.roadhogrc.mock.js配置数据进行本地开发
  4. dva开发组件都是return形式,不像vue是单写html,这两个区别比较大,需要熟悉

5.开始开发

我们通过vue对比进行开发,所以从我们熟悉的开始(routes已换成pages)

// .webpackrc.js
import { resolve } from 'path'
let publicPath
module.exports = {
    publicPath,
    outputPath: './dist',
    // 按需加载antd组件
    extraBabelPlugins: [
        [
            'import',
            {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: 'css',
            },
        ],
    ],
    alias: {
        components: resolve(__dirname, './src/components'),
        utils: resolve(__dirname, './src/utils'),
        pages: resolve(__dirname, './src/pages'),
        services: resolve(__dirname, './src/services'),
        api: resolve(__dirname, './src/api'),
        models: resolve(__dirname, './src/models'),
        img: resolve(__dirname, './src/assets/img'),
    },
}

1. 新增文件夹src/api将接口地址写在里面
|- mock
|- node_modules
|- package.json
|- public
|- src
+   |- api
    |- asserts
    |- components
    |- models
    |- pages
    |- services
    |- utils
    |- router.js
    |- index.js
    |- index.css
|- .editorconfig
|- .eslintrc
|- .gitignore
|- .roadhogrc.mock.js
|- .webpackrc

例如:

// src/api/commodity.js
// 商品列表
export const commodityListUrl = url
2. services 将所有后台的接口请求都写在里面,例如
// src/services/commodityService.js
import request from 'utils/request'
import {
    commodityListUrl,
} from 'api/commodity'
import { createAFordownLoad } from 'utils/methods'
/**
 * 获取商品列表
 *
 * @param {*} payload
 * @returns
 */
export const getCommodityList = async payload => {
    try {
        const { result } = await request({
            url: `${commodityListUrl}`,
            data: payload,
        })
        return Promise.resolve(result)
    } catch (e) {
        return Promise.resolve(e.message)
    }
}
3. 添加路由
// src/router.js 注意这里是示意代码 不是业务代码,在实际开发中会根据情况变化
import React from 'react';
import { Router, Route } from 'dva/router';
import commodity from './pages/list';
// 假装有其他
import example from './pages/example';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
        <Route path="/" exact component={commodity} />
        <Route path="/example" exact component={example} />
    </Router>
  );
}

export default RouterConfig;

dva 内置了 dynamic 方法用于实现组件的动态加载,用法如下:

import dynamic from 'dva/dynamic';

const UserPageComponent = dynamic({
  app,
  models: () => [
    import('./models/users'),
  ],
  component: () => import('./routes/UserPage'),
})

实际使用时,可以对其进行简单的封装,否则每个路由组件都这么写一遍很麻烦。 例如我们可以:

import routes from '' // 把Route集中写进一个文件
function RouterConfig({ history }) {
  return (
    <Router history={history}>
       <Switch>
            {routes.map(({ path, ...dynamics }, key) => (
                <Route
                    key={key}
                    path={path}
                    exact
                    component={dynamic({ app, ...dynamics })}
                />
            ))}
        </Switch>
    </Router>
  );
}

4. modal设计

Model 是 dva 最重要的部分,可以理解为 redux、react-redux、redux-saga 的封装。 通常项目中一个模块对应一个 model,一个基本的 model 如下:

import { hashHistory } from 'dva/router'
import { query } from '../services/users'
export default {
  namespace: 'commodity',

  state: {
    list: [],
  },

  subscriptions: {
    setup({ dispatch, history }) {
      // 进入页面就调用
      history.listen(location => {
        if (location.pathname === '/') {
          dispatch({
            type: 'query',
            payload: {},
          })
        }
      })
    },
  },

  effects: {
    *query({ payload }, { select, call, put }) {
      yield put({ type: 'showLoading' })
      const { data } = yield call(query)
      if (data) {
        yield put({
          type: 'querySuccess',
          payload: {
            list: data.data,
            total: data.page.total,
            current: data.page.current,
          },
        })
      }
    },
    *create() {},
    // delete为关键字
    *'delete'() {},
    *update() {},
  },

  reducers: {
    showLoading(state, action) {
      return {
        ...state,
        loading: true,
      }
    },
    showModal() {},
    hideModal() {},
    querySuccess(state, action) {
      return {
        ...state,
        ...action.payload,
        loading: false,
      }
    },
    createSuccess() {},
    deleteSuccess() {},
    updateSuccess() {},
  },
}

  • namespace 是该 model 的命名空间,同时也是全局 state 上的一个属性,只能是字符串,不支持使用 . 创建多层命名空间。
  • state 是状态的初始值。
  • reducer 是唯一可以修改 state 的地方,由 action 触发,它有 state 和 action 两个参数。 类似vue中store的mutation
  • effects 用于处理异步操作,不能直接修改 state,由 action 触发,也可触发 action。它只能是 generator 函数,并且有 action 和 effects 两个参数。第二个参数 effects 包含 put、call 和 select 三个字段,put 用于触发 action,call 用于调用异步处理逻辑,select 用于从 state 中获取数据。 类似vue中store中的action
  • subscriptions 用于订阅某些数据源,并根据情况 dispatch 某些 action,格式为 ({ dispatch, history }, done) => unlistenFunction。
5. 组件设计(由于后台项目比较大,建议写在对应的页面component里)
6. 连通组件和modal数据
|- src
    |- api
    |- asserts
    |- components
    |- models
    |- pages
+        |- commodity
+           |- component
+                |- dataTable.js
+           |- list.js
// src/pages/commodity/component/dataTable.js
import React, { Component } from 'react'
import { Table, Button } from 'antd' // antd 组件

class DataTable extends Component {
    render() {
        const {
            data: { list, pagination },
        } = this.props // 获取数据
        const columns = [] // 定义表头及内容
        return (
            <Table
                rowKey="draftSn"
                columns={columns}
                DataTable
                dataSource={list}
                pagination={pagination}
            />
        )
    }
}

export default DataTable
// src/pages/commodity/list.js
import React, { Component } from 'react'
import { connect } from 'dva'
import DataTable from './component/dataTable' // 注意组件一定要大写

class CommodityList extends Component {
    state = {
        list: [],
    }
    render() {
        // 从modal获取数据
        const {
            commodity, // modal数据
            dispatch, // service方法
            location, // 可以获取url相关信息
            history,  // 路由
        } = this.props
        // 为组将传参
        const tableProps = {
            data: commodity,
            dispatch,
            history,
        }
        return (
            <div>
                <DataTable {...tableProps} />
            </div>
        )
    }
}
// 连通modal和页面数据
function mapStateToProps({ commodity }) {
    return { commodity }
}
export default connect(mapStateToProps)(CommodityList)

final

熟悉了这些,可以愉快开始开发了。虽然上手稍微比vue难一点,但是熟悉了,写起来还是很爽的。