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));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151748.html
標籤：JavaScript