一、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/目录下定义好其结构化类型声明