一、connect mapStateToProps 中的提示
connect 提示.jpg
function mapStateToProps(state: ConnectState) {
return {
menuCollapsed: state.global.menuCollapsed,
};
}
这个提示依赖于 ConnectState, ConnectState是怎么定义呢？
ConnectState 这个相当于整个工程model层state的输出（connect.d.ts 文件）
import { AnyAction } from 'redux';
import { RouterTypes } from 'umi';
import { GlobalModelState } from './global';
export interface Loading {
global: boolean;
effects: { [key: string]: boolean | undefined };
models: {
};
}
export interface ConnectState {
loading: Loading;
global: GlobalModelState
}
在这个文件中，要把你定义的model的state interface
import { GlobalModelState } from './global';
然后导出
export interface ConnectState {
global: GlobalModelState
}
二、model的定义
import { Reducer } from 'redux';
import { Effect } from 'dva';
// 需要导出的state
export interface XXXState {
key1: string;
key2: string[];
}
export interface XXXModelType {
namespace: string;
state: XXXState;
effects: {
effects1: Effect;
effects2: Effect;
effects3: Effect;
};
reducers: {
reducers1: Reducer<XXXState>;
};
}
三、页面state props定义
个人遇到常见问题
1.dispatch 怎么定义
import { Dispatch, AnyAction } from 'redux';
interface Props {
dispatch: Dispatch<AnyAction>;
}
2.antd form 怎么定义
import { FormComponentProps } from 'antd/es/form';
interface Props {
form: FormComponentProps['form'];
}
3.location query 怎么定义
import { RouteComponentProps } from 'react-router-dom';
interface Props extends RouteComponentProps {
others: ...
}
这样 this.props 中就有location等字段
4.一般情况下，props中基本都是model中定义的，我们可以直接继承model定义的，不用重新写
import { modelState } from '@/models/model';
interface Props extends modelState {
others: ...
}
导出model中定义的state，继承即可
5.props中多个model的参数，切含有location，多个继承
import { RouteComponentProps } from 'react-router-dom';
import { model1State } from '@/models/model1';
import { model2State } from '@/models/model2';
interface Props extends RouteComponentProps, model1State, model2State {
others: ...
}
四、一些事件
1.input onChange
onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
}
2.input onClick
onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
}
五、返回的数据 （可选做，这个的工作量相对较多，但是做好后，定义好类型，修改字段会变的非常容易，类型检测会避免很多错误）
interface prop_list {
name?: string;
value?: string;
image?: string;
}
export interface sku_list_list {
cost_price?: string;
variant_sku?: string;
stock?: string;
prop_list?: prop_list[];
}
----------------20200420更新----------------
六、对于返回的数据，项目中常用到的接口数据对象（比如，用户信息，商品信息，订单信息等）
在types/目录下定义好其结构化类型声明
