DvaJS入門課

時間 2020-03-09

標籤 dvajs 入門简体版

原文原文鏈接

不論是Vue仍是React，他們都沒解決組件間的通訊和數據流問題。固然，這個說法不是很準確，準確的說法是他們都沒很好的處理這些問題。咱們是能夠用一些爛手段去解決這個問題，可是當應用比較大、數據多的時候，這將變的很是難以維護。所以，咱們還須要引入別的庫去優雅的解決這個問題。好比：Vue中的Vuex，React中的dva。若是已經掌握Vuex，dva也能很快上手。javascript

React沒有解決的問題（Dva的由來）

React 自己只是一個 DOM 的抽象層，使用組件構建虛擬 DOM。css

若是開發大應用，還須要解決一個問題。html

通訊：組件之間如何通訊？
數據流：數據如何和視圖串聯起來？路由和數據如何綁定？如何編寫異步邏輯？等等

介紹

dva 首先是一個基於 redux 和 redux-saga 的數據流方案，而後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，因此也能夠理解爲一個輕量級的應用框架。前端

dva = React-Router + Redux + Redux-sagajava

特性

易學易用，僅有 6 個 api，對 redux 用戶尤爲友好，配合 umi 使用後更是下降爲 0 API
elm 概念，經過 reducers, effects 和 subscriptions 組織 model
插件機制，好比 dva-loading 能夠自動處理 loading 狀態，不用一遍遍地寫 showLoading 和 hideLoading
支持 HMR，基於 babel-plugin-dva-hmr 實現 components、routes 和 models 的 HMR

構建項目

安裝dva-clireact
```
npm install dva-cli -g
```
建立新應用webpack
```
dva new dva-quickstart
```
啓動項目
而後咱們 cd 進入 dva-quickstart 目錄，並啓動開發服務器：git
```
$ cd dva-quickstart
$ npm start
```
使用 antd經過 npm 安裝 antd 和 babel-plugin-import 。babel-plugin-import 是用來按需加載 antd 的腳本和樣式的，詳見 repo 。github
```
$ npm install antd babel-plugin-import --save
```
編輯 .webpackrc，使 babel-plugin-import 插件生效。web
```
{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}
```
定義路由咱們要寫個應用來先顯示產品列表。首先第一步是建立路由，路由能夠想象成是組成應用的不一樣頁面。

新建 route component routes/Products.js，內容以下：
```
import React from 'react';

const Products = (props) => (
  <h2>List of Products</h2>
);

export default Products;
```
添加路由信息到路由表，編輯 router.js :
```
+ import Products from './routes/Products';
...
+ <Route path="/products" exact component={Products} />
```
而後在瀏覽器裏打開 http://localhost:8000/#/products ，你應該能看到前面定義的 h2 標籤。

編寫UI Component隨着應用的發展，你會須要在多個頁面分享 UI 元素 (或在一個頁面使用屢次)，在 dva 裏你能夠把這部分抽成 component 。

咱們來編寫一個 ProductList component，這樣就能在不一樣的地方顯示產品列表了。

新建 components/ProductList.js 文件：

import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;

定義 Model完成 UI 後，如今開始處理數據和邏輯。

dva 經過 model 的概念把一個領域的模型管理起來，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數據源的 subscriptions 。

新建 model models/products.js ：
```
export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};
```
這個 model 裏：
- namespace 表示在全局 state 上的 key
- state 是初始值，在這裏是空數組
- reducers 等同於 redux 裏的 reducer，接收 action，同步更新 state
而後別忘記在 index.js 裏載入他：
```
// 3. Model
+ app.model(require('./models/products').default);
```

connect 起來到這裏，咱們已經單獨完成了 model 和 component，那麼他們如何串聯起來呢?

dva 提供了 connect 方法。若是你熟悉 redux，這個 connect 就是 react-redux 的 connect 。

編輯 routes/Products.js，替換爲如下內容：

import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
export default connect(({ products }) => ({
  products,
}))(Products);

最後，咱們還須要一些初始數據讓這個應用 run 起來。編輯 index.js：

- const app = dva();
+ const app = dva({
+   initialState: {
+     products: [
+       { name: 'dva', id: 1 },
+       { name: 'antd', id: 2 },
+     ],
+   },
+ });

刷新瀏覽器，應該能看到如下效果：

Dva 概念

數據流向

數據的改變發生一般是經過：

用戶交互行爲（用戶點擊按鈕等）
瀏覽器行爲（如路由跳轉等）觸發的

當此類行爲會改變數據的時候能夠經過 dispatch 發起一個 action，若是是同步行爲會直接經過 Reducers 改變 State ，若是是異步行爲（反作用）會先觸發 Effects 而後流向 Reducers 最終改變 State。因此，在 dva 中，數據流向很是清晰簡明。

Models

核心概念

State：一個對象，保存整個應用狀態
View：React 組件構成的視圖層
Action：一個對象，描述事件
connect 方法：一個函數，綁定 State 到 View
dispatch 方法：一個函數，發送 Action 到 State

State

type State = any

State 表示 Model 的狀態數據，一般表現爲一個 javascript 對象（固然它能夠是任何值）；操做的時候每次都要看成不可變數據（immutable data）來對待，保證每次都是全新對象，沒有引用關係，這樣才能保證 State 的獨立性，便於測試和追蹤變化。

在 dva 中你能夠經過 dva 的實例屬性 _store 看到頂部的 state 數據，可是一般你不多會用到:

const app = dva();
console.log(app._store); // 頂部的 state 數據

Action

type AsyncAction = any

Action 是一個普通 javascript 對象，它是改變 State 的惟一途徑。不管是從 UI 事件、網絡回調，仍是 WebSocket 等數據源所得到的數據，最終都會經過 dispatch 函數調用一個 action，從而改變對應的數據。action 必須帶有 type 屬性指明具體的行爲，其它字段能夠自定義，若是要發起一個 action 須要使用 dispatch 函數；須要注意的是 dispatch 是在組件 connect Models之後，經過 props 傳入的。

dispatch({
  type: 'add',
});

dispatch 函數

type dispatch = (a: Action) => Action

dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的惟一途徑，可是它只描述了一個行爲，而 dipatch 能夠看做是觸發這個行爲的方式，而 Reducer 則是描述如何改變數據的。

在 dva 中，connect Model 的組件經過 props 能夠訪問到 dispatch，能夠調用 Model 中的 Reducer 或者 Effects，常見的形式如：

dispatch({
  type: 'user/add', // 若是在 model 外調用，須要添加 namespace
  payload: {}, // 須要傳遞的信息
});

Reducer

type Reducer = (state: S, action: A) => S

Reducer（也稱爲 reducing function）函數接受兩個參數：以前已經累積運算的結果和當前要被累積的值，返回的是一個新的累積結果。該函數把一個集合歸併成一個單值。

Reducer 的概念來自因而函數式編程，不少語言中都有 reduce API。如在 javascript 中：

[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    return Object.assign(prev, next);
})
//return {x:1, y:2, z:3}

在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。經過 actions 中傳入的值，與當前 reducers 中的值進行運算得到新的值（也就是新的 state）。須要注意的是 Reducer 必須是純函數，因此一樣的輸入必然獲得一樣的輸出，它們不該該產生任何反作用。而且，每一次的計算都應該使用immutable data，這種特性簡單理解就是每次操做都是返回一個全新的數據（獨立，純淨），因此熱重載和時間旅行這些功能纔可以使用。

Effect

Effect 被稱爲反作用，在咱們的應用中，最多見的就是異步操做。它來自於函數編程的概念，之因此叫反作用是由於它使得咱們的函數變得不純，一樣的輸入不必定得到一樣的輸出。根據函數式編程，計算之外的操做都屬於 Effect，典型的就是 I/O 操做、數據庫讀寫。

dva 爲了控制反作用的操做，底層引入了redux-sagas作異步流程控制，因爲採用了generator的相關概念，因此將異步轉成同步寫法，從而將effects轉爲純函數。至於爲何咱們這麼糾結於 純函數，若是你想了解更多能夠閱讀Mostly adequate guide to FP，或者它的中文譯本JS函數式編程指南。

effects: {
    *addAfter1Second (action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
}

Subscription

Subscriptions 是一種從源獲取數據的方法，它來自於 elm。

Subscription 語義是訂閱，用於訂閱一個數據源，而後根據條件 dispatch 須要的 action。數據源能夠是當前的時間、服務器的 websocket 鏈接、keyboard 輸入、geolocation 變化、history 路由變化等等。格式爲 ({ dispatch, history }) => unsubscribe 。

subscriptions 只是定義了一個地方，用來訂閱數據。

而後會傳遞 dispatch 和 history（dispatch 是 redux 的 store 中的 dispatch ，history 是 react-router 中的history。），具體要怎麼訂閱或是監聽都須要第三方的類庫來實現。

在這個 subsription 中的方法名是隨意定的，每次變化都會一次去調用裏面的全部方法。

import key from 'keymaster'; // 實現鍵盤監聽的庫
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/users') {
          dispatch({
            type: 'users/fetch',
          });
        }
      });
    },
  }
});

參考：Subscriptions可否補充一些例子或者文檔呢？

Router

這裏的路由一般指的是前端路由，因爲咱們的應用如今一般是單頁應用，因此須要前端代碼來控制路由邏輯，經過瀏覽器提供的 History API 能夠監聽瀏覽器url的變化，從而控制路由相關操做。

dva 實例提供了 router 方法來控制路由，使用的是react-router。

import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

Route Components

在組件設計方法中，咱們提到過 Container Components，在 dva 中咱們一般將其約束爲 Route Components，由於在 dva 中咱們一般以頁面維度來設計 Container Components。

因此在 dva 中，一般須要 connect Model的組件都是 Route Components，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components）。

dva 應用的最簡結構

const app = dva();

// 註冊 Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000); // 和 Server 層交互
      yield put({ type: 'add' });
    },
  },
  subscriptions: {
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
    // setup在組件渲染以前會觸發，setup通常是直接出發effects裏面的方法
    setup({ dispatch, history }) {
      dispatch({ type: 'fetch'}); //若是是當前model能夠直接寫方法名
    },
  }
});

// 註冊視圖
app.router(() => <ConnectedApp />);

// 啓動應用
app.start('#root');