目錄
前言
一、dva是什麼？
二、使用步驟
1.建立項目
2.使用dva
3.使用connect
總結
前言
最近在項目中接觸了umi架構，當然使用的前提是熟悉react和router。而dva我感覺像是redux和react-router的結合。下面講一下我在項目中的實際使用。
提示：以下是本篇文章正文内容，下面案例可供參考
一、dva是什麼？
我個人感覺dva和redux非常相似是一個管理狀态的工具。快速上手 | DvaJS
官網介紹：
dva
首先是一個基于 redux 和 redux-saga 的資料流方案，然後為了簡化開發體驗，
dva
還額外内置了 react-router 和 fetch，是以也可以了解為一個輕量級的應用架構
二、使用步驟
1.建立項目
$ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app
具體各個檔案是什麼意思大家可以去看umi的官網，這裡就長話短說。
2.使用dva
dva最重要的就是要有model檔案，下面是umi内置的dva：
這裡借用一下其他部落客的圖，我感覺非常的形象：
我的了解：model其實就是一個函數：
裡面包括namespace，state,reducers,effects,subscriptions。
export default {
//namespace命名空間，相當于給model取個名字，但是各個model的namespce是不能重複的
namespace: 'test',
//state我了解為是資料倉庫，就是存資料的地方，model裡的資料都是存放在這裡的
state : {
name: 'wang'
},
/*reducers把資料存到倉庫（存到state）裡的唯一方法，我們修改state裡的資料不能直接像this.name='liu'這樣去修改，而必須通過調用reducers裡的方法，在之後會詳細講到*/
reducers:{
},
/*異步方法，簡單來說我們的異步請求就寫在這裡*/
effects: {
},
/*訂閱，在這裡我的了解就是監聽頁面的，比如監聽到進入了某某頁面就讓它執行相關代碼之類的*/
subscriptions: {
}
}
model檔案的内容結構大概就是這樣：
1.namespace是命名空間，基本和你的ts檔案名保持一緻。比如：
2.state就不用介紹了，是你希望儲存和修改并且可以傳遞到其他元件的全局狀态。
3.reducers的結構：save函數接收兩個參數分别是state和action，傳回一個新的state。
//格式如下
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
4.effects：異步的方法，我們的網絡請求都寫在這裡，也可以寫資料篩選之類的方法。需要注意的就是yield call和yield put的使用。
這裡的put()其實就是調用的我們之前寫的reducers裡的save方法，在effects拿到資料後通過yield put調用reducers的save方法來改變state。
3.使用connect
寫完model和component後，将使用connect将他們串聯起來。
dva 提供了 connect 方法。如果你熟悉 redux，這個 connect 就是 react-redux 的 connect 。
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);
connect接收四個參數:mapStateToProps允許我們将 store 中的資料作為 props 綁定到元件上。
mapDispatchToProps将action作為props綁定到元件上。
mergeProps和options基本不傳，我們隻要掌握前兩個就好了
總結
我其實也是第一次接觸umi和dva，肯定了解沒那麼深，大概使用就是這樣子。