一句话讲清楚 dva @connect中的魔法参数 到底是什么约定方式（基于AntDesignPro ts版）

很久就关注了Ant Design Pro，本来还在学习中，公司正好有个项目非常适合用这种框架快速实现。
经过一番考虑之后还是冒险直接上了。。。

整个学习过程就dva这个@connect 一脸懵逼（只会jq的基础，直接上的Ant Design Pro）
找了很多demo，包括官方的一个counter，一个todolist，都没有对应的ts方式的写法

经过一番探索，终于完成了一个基本的helloworld，拿login中的源码做例子：

//model.tsx
export interface StateType {
  status?: 'ok' | 'error';
  type?: string;
  currentAuthority?: 'user' | 'guest' | 'admin';
}

↑StateType 的定义

//index.tsx
...
interface UserLoginProps {
  dispatch: Dispatch<any>;
  userLogin: StateType;
  submitting: boolean;
}
...
@connect(
  ({
     userLogin,
     loading,
   }: {
    userLogin: StateType;
    loading: {
      effects: {
        [key: string]: string;
      };
    };
  }) => ({
    userLogin,
    submitting: loading.effects['userLogin/login'],
  }),
)
class UserLogin extends Component<UserLoginProps,
  UserLoginState> {
  ...
  }

• UserLoginProps 定义了Props的数据类型，使得在UserLogin这个Component中获取参数时更明确。
• @connect是 UserLogin组件的注解，必须在class前进行注解

下面分析一下@connect:
@connect()的()中实际上是定义了一个 箭头函数 （）=>{} ,connect负责注入（）中的参数，｛｝中的赋值是从（）传入的数据赋值并绑定UserLoginProps 中的参数。
再来说一下@connect中的箭头函数（）=>{}中的（）里的内容

{
     userLogin,
     loading,
   }: {
    userLogin: StateType;
    loading: {
      effects: {
        [key: string]: string;
      };
    };
  }

:前面是｛｝对象，:后面是该对象的类型限定。

最后说一下connect是怎么注入的：

首先dva是基于redux的，redux的定义是所有个变量都存放在一个变量池store，dva对state的区分是根据namespace的

const Model: ModelType = {
  namespace: 'userLogin',
  ...
  }

所以connect中的userLogin就是namespace

{
     userLogin,
     loading,
   }:

指定了之后，dva会将该namespace下的state注入到连接的组件中
连接后，就可以在render中取得该state：

 render() {
    const {userLogin, submitting} = this.props;
    const {status, type: loginType} = userLogin;
	...
}

从上面 const {status, type: loginType} = userLogin;这句可以看出，userLogin注入的就是model中定义的state。

临时记录，有所疑问还请提出