dva入手指南

由於積分商城項目接觸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難一點，可是熟悉了，寫起來仍是很爽的。