账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ant-design-pro @connect 应该如何理解?
    26
    0

    关于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. 加载路由的时候,会动态加载当前文件下的model文件,也就是对应文件下的src/models/login.js
    2. connect 有两个参数,mapStateToProps以及mapDispatchToProps,一个将状态绑定到组件的props一个将方法绑定到组件的props

    问题

    1. ({login, loading})=>({}) 这是一个函数,和connect 函数的两个参数不同,我应该如何理解这个写法?
    2. login和submitting这个怎么理解,是指绑定到submitting到组件的this.props里面吗? 那么他是如何把src/models/login.js 里面的effects触发的? 并且在组件中没有看到如何方法调用submitting
    3. loading.effects['login/login'] 这个方法应该如何理解?

    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,
          };
        },
      },
    };
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 少女心事 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部