TS是大前端中非常重要的組成部分泉懦，實際開發(fā)中，讓每個開發(fā)者擁有屬于自己的模塊拱烁，下面是對
dva,Antd Pro档址，React Hooks,一些聲明類型和坑的總結。 ?? 值得注意的是 邻梆，在Antd pro內部Model自動映射到全局。
Hooks函數組件聲明方式
interface IntrinsicElements {
[elemName: string]: any;
}
使用
const Nodelist: React.FC<IntrinsicElements> =()=>{
return (<h1>Hello绎秒，World浦妄！</h1>)
}
export default Nodelist;
Dva的聲明
state
interface StateType {
data:Array;
}
Effect
import { EffectsCommandMap, Model } from 'dva';
import { AnyAction, Reducer } from 'redux';
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;
整個Model的聲明
import { EffectsCommandMap, Model } from 'dva';
import { AnyAction, Reducer } from 'redux';
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;
interface StateType {
data:Array;
}
interface ModelType {
namespace: string;
state: StateType;
effects: {
nodelists: Effect;
};
reducers: {
save: Reducer<StateType>;
};
}
此時 看看我實際整個Model層
import { getNodeList } from './service';
//初始狀態(tài)
const defaultState: StateType = {
data: [],
};
const Model: ModelType = {
namespace: 'nodelist',
state: defaultState,
effects: {
//List
*nodelists({ callback }, { call, put }) {
const response = yield call(getNodeList)
let payload = { data: response.content.data }
yield put({ type: 'save', payload });
},
},
reducers: {
save(state = { ...defaultState }, action) {
return {
...state,
...action.payload
};
}
},
};
//Link to dva warehouse Ts declaration type //這是給組件連接dva時聲明類型用
export type AdminState = Readonly<typeof defaultState>;
//Export the nodelist module(automatically register to the global)
export default Model;
都是和我們定義好的 ModelType 一一對應的
看下Service層
import request from '@/utils/request';
//節(jié)點列表
export async function getNodeList() {
return request('/admin/node', {
method: 'GET'
})
}
怎么Connect你的Model和Comment
首先建立一個叫connect.d.ts的連接文件
//鏈接dva倉庫聲明類型用
import { AdminState } from './model';
interface ConnectState {
nodelist: AdminState;//前面是你的命名空間 后面的是從我實際整個Model層 拿過來的Model類型
}
export default ConnectState;
Connect
/**
* Connect is a built-in connector of dva.??? ??
* The following is the fixed writing of the component link dva warehouse.
* It contains the namespace you defined and the Loading object.
* It is worth noting that Loading is built into dva.Can be used directly.
* Type Example loading: { effects: { [key: string]: boolean }.
* It is worth remembering that you need to write your component name with a pair of parentheses at the end of the declared component.
* This will connect your specified namespace repository (nodelist in this example) to the current component.
* You can accept it component in props!
* @author xiaohuwei 2019.11.27
*/
import React,{useEffect} from 'react';
import { Modal, Form, Input } from 'antd';
import ConnectState from './connect';
import { Skeleton } from 'antd';
import { connect } from 'dva';
const Nodelist: React.FC<IntrinsicElements> =props=>{
//這里接受倉庫所有的方法 loading對象和觸發(fā)器
const { nodelist, dispatch, submitting } = props;
useEffect(()=>{
dispatch({type: 'nodelist/nodelists'}) //頁面加載的時候調用dva的異步方法
},[])
return (
<>
<Skeleton loading={submitting} active >
<h1>Hello，World见芹！</h1>
</Skeleton>
</>
)
}
export default connect(
({ nodelist, loading }: { nodelist: ConnectState, loading: { effects: { [key: string]: boolean } } }) => //第一個值為你的倉庫名 第二個為dva內置的loading對象
({
nodelist,
submitting: loading.effects['nodelist/nodelists'] || loading.effects['........'] //這里可以用 || 表示多個狀態(tài) 哪個發(fā)請求 dva自動監(jiān)聽哪個請求狀態(tài) 但是都可以用一個變量接收
})
)(Nodelist)
?? 值得注意的是: loading 對象是 dva 內置的剂娄，他會監(jiān)聽你指定的異步請求方法，方法開始的時候該值為 true ,異步方法結束了該值自動置為 false ,可用于頁面剛進來時骨架屏的加載和某些需要 loading 狀態(tài)的場景玄呛，當然 你可以在后面定義多個值（上面注釋有說明）阅懦，實現你當前組件的全局 loading 狀態(tài)。在上面的代碼中,頁面剛加載的時候我們發(fā)了一個異步方法(nodelist 倉庫下的異步 nodelists 方法)徘铝，submitting 變?yōu)?true 骨架屏效果出現耳胎，這個方法執(zhí)行完了（數據已經拿到）后submitting 會 變?yōu)?false 惯吕。
