ant-design-pro @connect 應(yīng)該如何理解?

關(guān)于ant-design-pro中使用的DVA的@connect的疑惑

import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Checkbox, Alert, Icon } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))

已知

1. 加載路由的時候,會動態(tài)加載當(dāng)前文件下的model文件,也就是對應(yīng)文件下的src/models/login.js
2. connect 有兩個參數(shù),mapStateToProps以及mapDispatchToProps,一個將狀態(tài)綁定到組件的props一個將方法綁定到組件的props

問題

1. ({login, loading})=>({}) 這是一個函數(shù),和connect 函數(shù)的兩個參數(shù)不同,我應(yīng)該如何理解這個寫法?
2. login和submitting這個怎么理解,是指綁定到submitting到組件的this.props里面嗎? 那么他是如何把src/models/login.js 里面的effects觸發(fā)的? 并且在組件中沒有看到如何方法調(diào)用submitting
3. loading.effects['login/login'] 這個方法應(yīng)該如何理解?

src/router/login.js 全部代碼

import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Checkbox, Alert, Icon } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
  };

  onTabChange = type => {
    this.setState({ type });
  };

  handleSubmit = (err, values) => {
    const { type } = this.state;
    if (!err) {
      this.props.dispatch({
        type: 'login/login',
        payload: {
          ...values,
          type,
        },
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { login, submitting } = this.props;
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
          <Tab key="account" tab="賬戶密碼登錄">
            <UserName name="username" placeholder="請輸入帳號..." />
            <Password name="password" placeholder="請輸入密碼..." />
          </Tab>
{/*           <div>
            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
              自動登錄
            </Checkbox>
          </div> */}
          <Submit loading={submitting}>登錄</Submit>
        </Login>
      </div>
    );
  }
}

src/models/login.js 全部代碼

import { routerRedux } from 'dva/router';
import { linkApi } from '../services/api';
import { setAuthority } from '../utils/authority';
import { reloadAuthorized } from '../utils/Authorized';

import { notification } from 'antd';


export default {
  namespace: 'login',

  state: {
    status: undefined,
  },

  effects: {
    *login({ payload }, { call, put }) {
      const response = yield call(linkApi, {
        cmd:"tx.web.restful.apis.controllers.services.base.BaseService#login",
        datas:{
          username:payload.username,
          password:payload.password,
          eType:0
        },
      });
      // Login successfully
      if (response.state == 200 ) {
        yield put({
          type: 'changeLoginStatus',
          payload: response.datas
        });
        reloadAuthorized();
        yield put(routerRedux.push('/'));
      }
    },
    *logout(_, { put, select }) {
      try {
        // get location pathname
        const urlParams = new URL(window.location.href);
        const pathname = yield select(state => state.routing.location.pathname);
        // add the parameters in the url
        urlParams.searchParams.set('redirect', pathname);
        window.history.replaceState(null, 'login', urlParams.href);
      } finally {
        yield put({
          type: 'changeLoginStatus',
          payload: ""
        });
        reloadAuthorized();
        yield put(routerRedux.push('/user/login'));
      }
    },
  },

  reducers: {
    changeLoginStatus(state, { payload }) {
      setAuthority(payload);
      return {
        ...state,
        status: payload.status,
        type: payload.type,
      };
    },
  },
};