Umi 小白紀實（二）—— model 的註冊與使用

Umi 通常會搭配 Dva 使用，用於管理頁面狀態和邏輯

一、註冊 model

首先需要在 .umirc.js 中啟用 dva 插件

export default {
  plugins: [
    ['umi-plugin-react', {
      dva: {
        immer: true,
      },
    }],
  ],
}

dva 通過 model 的概念把一個模型管理起來，相當於其他狀態管理工具中的 store，通常由以下組成

export default {
  namespace: '', // 表示在全局 state 上的 key
  state: {}, // 狀態數據
  reducers: {}, // 管理同步方法，必須是純函數
  effects: {}, // 管理非同步操作，採用了 generator 的相關概念
  subscriptions: {}, // 訂閱數據源
};

在 umi 中會按照約定的目錄來註冊 model，且文件名會被識別為 model 的 namespace

model 還分為 src/models/*.js 目錄下的全局 model，和 src/pages/**/models/*.js 下的頁面 model

然後在 src/pages/ 下的頁面文件中通過 connect 關聯對應的 model

import React, { Component } from 'react';
import { connect } from 'dva';
class PageView extends Component {
  render() {
    return <div>
      <h1>PageView for Dva.Model</h1>
    </div>
  }
};

// 這裡的 pageModel 是對應 model 的 namespace
const mapStateToProps = ({ pageModel }) => {
  return { ...pageModel };
};

export default connect(mapStateToProps)(PageView);

上面的 mapStateToProps 方法會將對應 model 中的 state 映射到 props

它接受的第一個參數是所有可以使用的 state，即全局 model 和當前頁面 model 的 state，需要通過 namespace 區分

二、簡單上手

假如有這樣的 model:

經過 connect 之後，可以在頁面上可以直接通過 props 獲取到 state

 如果需要修改 state 的值，可以在 reducers 中添加一個函數

然後在頁面上通過 dispatch 調用

被 connect 的 Component 會自動在 props 中擁有 dispatch 方法

它需要一個包含 type 和 payload 的對象作為入參

其中 type 是需要調用的方法名，可以是 reducer 或者 effect，不過需要添加對應 model 的 namespace

payload 是需要傳遞的信息，可以在被調用的方法中接收

從這裡可以看出，只要 State 有變化，視圖層就會自動更新

這裡就需要介紹一下 dva 的五個核心元素：

State：一個對象，保存整個應用狀態

View：React 組件構成的視圖層

Action：一個對象，描述事件

connect 方法：一個函數，綁定 State 到 View

dispatch 方法：一個函數，發送 Action 到 State

在 Dva 中，State 是儲存數據的地方，我們通過 dispatch 觸發 Action，然後更新 State。

如果有 View 使用 connect 綁定了 State，當 State 更新的時候，View 也會更新。

三、非同步函數

Dva 中的非同步操作都放到 effects 中管理，基於 Redux-saga 實現

Effect 是一個 Generator 函數，內部使用 yield 關鍵字，標識每一步的操作

每一個 effect 都可以接收兩個參數：

1. 包含 dispatch 攜帶參數 payload 的 action 對象

2. dva 提供的 effect 函數內部的處理函數集

第二個參數提供的處理函數中，常用的有 call、put、select

call: 執行非同步函數

put: 發出一個 Action，類似於 dispatch

select: 返回 model 中的 state

完整的示例：

import * as services from '@/services';
export default {
  namespace: 'pageModel',
  state: {
    title: 'Welcome to Wise.Wrong\'s Bolg',
    name: 'wise'
  },
  effects: {
    *testEffect({ payload }, { call, put, select }) {
      // 獲取 state 中的值
      const { name } = yield select(state => state.pageModel);
       // 介面入參
      const params = { name, ...payload };
      // services.getInfo 是封裝好的請求
      const { data } = yield call(services.getInfo, params);
      // 請求成功之後，調用 reducer 同步方法更新 state
      yield put({
        // 調用當前 model 的 action 不需要添加 namespace
        type: 'changeTitle',
        payload: data,
      });
    }
  },
  reducers: {
    changeTitle(state, { payload }) {
      return {
        ...state,
        title: payload
      };
    },
  },
};

四、常見問題

1. 在 effects 中，如何同步調用兩個非同步函數？

如果在一個 effect 中，函數 B 的入參需要依賴於函數 A 的執行結果，可以使用 @@end 來阻塞當前的函數

2. 在 model 中使用 router ？

在 model 中引入 umi/router 即可

import router from 'umi/router';

...
router.push(`?${qs.stringify(search)}`);

3. 全局 layout 使用 connect 後路由切換不更新頁面

需用 withRouter 高階一下，註意順序

import withRouter from 'umi/withRouter';

const mapStateToProps = (state) => {
  // ...
};

export default withRouter(connect(mapStateToProps)(Layout));