使用 dva + antd 快速開發react應用

使用 dva + antd 快速開發react應用

版本說明：

注意：dva的版本是0.9.2

$ node -v v10.2.1 $ npm -v 5.6.0 $ dva -v dva-cli version 0.9.2

安裝cli腳手架：

npm install dva-cli -g

使用腳手架生成應用：

dva new dva_page

建議：在new以前最好安裝一下淘寶鏡像，由於dva new命令會自動安裝node_modules，若是使用npm會比較慢。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝antd和babel按需加載插件工具：

cd dva_page npm install antd --save npm install babel-plugin-import --D

配置babel-plugin-import：

修改根目錄下的.webpackrc文件（注意前面的.，表明linux下的隱藏文件，這是roadhog的webpack配置文件）

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

啓動服務：

npm start

 

 此時打開瀏覽器http://localhost:8000/#/能夠看到：

編寫routes：

dva默認的頁面寫在 \src\routes 目錄下面：

咱們隨便引入一個antd組件，寫一個demo：

import React, { Component } from 'react'; import { connect } from 'dva'; import { Timeline } from 'antd'; class Demo extends Component { render() { return ( <Timeline>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline> ); } } Demo.propTypes = { }; export default connect()(Demo);

修改路由router.js：

dva的路由配置默認處在 \src\routes 裏，咱們在裏面增長一個路由：

import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import IndexPage from './routes/IndexPage'; import Demo from './routes/Demo'; function RouterConfig({ history }) { return ( <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/demo" exact component={Demo} />
      </Switch>
    </Router> ); } export default RouterConfig;

如今咱們已經能夠在http://localhost:8000/#/demo訪問新增的頁面了。

網絡請求：

以前編寫的都是靜態頁面，那麼若是有網絡請求和數據交互，怎麼弄呢？

先完善下 \src\routes\Demo.js ：

組件在willMount生命週期會dispatch數據到models層中 namespace 爲demo的對象， 觸發執行effects中的fetch方法。

import React, { Component } from 'react'; import { connect } from 'dva'; import { Timeline } from 'antd'; class Demo extends Component { UNSAFE_componentWillMount() { // dispatch -> effects -> reducer -> 更新this.props
    this.props.dispatch({ type: 'demo/fetch', //models裏的namespace/effects中的方法名
      payload: {  //models裏的namespace/effects中的payload參數
 time: Date.now(), }, }).catch(err => { // 異常能夠在這裏處理，好比網絡請求等等
　　}) } render() { // console.log(this.props);
    return ( <Timeline>
        <Timeline.Item>{`${new Date(this.props.new_time)}`}</Timeline.Item>
      </Timeline>
 ); } } Demo.propTypes = { }; const mapStateToProps = (state) => {  //把state轉換爲props
 console.log(state); // 這裏會把return的對象做爲props傳入到Demo這個類裏
  return state.demo; }; export default connect(mapStateToProps)(Demo);

 

在  \src\services\ 中新建文件demo.js ：

發送一個網絡請求：

import request from '../utils/request'; export function query(params) { return request('/api/users'); }

在  \src\models\ 中新建文件demo.js ：

先引入service文件  /services/demo.js -> 定義namespace爲demo -> 在effects定義generator函數 *fetch ，調用services中的請求，將請求結果放入reducers -> reducer將最終結果傳入  \src\routes\Demo.js 。

import * as demo from '../services/demo'; export default { namespace: 'demo', state: { a: 1 }, subscriptions: { setup({ dispatch, history }) { }, }, effects: { // payload 是\src\routes\Demo.js dispatch 過來的參數
    *fetch({ payload }, { call, put }) { // 調用service中的請求，把請求結果存放在result中
      let result = yield call(demo.query, payload.time); //若是使用 {參數} ，則是一個對象
      result = { data: payload.time / 1000 };  // 由於沒有配後臺，因此這裏result本身模擬數據
      // 將result放入reducer中
 yield put({ type: 'save',  //reducers中的方法名
 payload:{ new_time: result.data //網絡返回的要保留的數據
 } }); }, }, reducers: { save(state, action) { // 將state和effects的put方法的payload傳給\src\routes\Demo.js
      return { ...state, ...action.payload }; }, }, };

在 /src/index.js 中 註冊model：

import dva from 'dva'; import './index.css'; // 1. Initialize
const app = dva(); // 2. Plugins // app.use({});

// 3. Model // app.model(require('./models/example').default);
app.model(require('./models/demo').default); // 4. Router
app.router(require('./router').default); // 5. Start
app.start('#root');

 最後在瀏覽器http://localhost:8000/#/demo看到：

總結：

dva的數據流能夠歸納爲：

1. 註冊model

2. 使用connect鏈接mode和page

3. 數據流方向： page(routes)  ->  (this.props.dispatch)  ->  model ->model/effects -> (call) -> service -> model/effects -> (put) -> reducer -> page -> (this.props)