How to use dva - 10 common examples

import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd';

import TagSelect from '@/components/TagSelect';
import StandardFormRow from '@/components/StandardFormRow';
import ArticleListContent from '@/components/ArticleListContent';
import styles from './Articles.less';

const { Option } = Select;
const FormItem = Form.Item;

const pageSize = 5;

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
@Form.create({
  onValuesChange({ dispatch }, changedValues, allValues) {
    // 表单项变化时请求数据
    // eslint-disable-next-line
    console.log(changedValues, allValues);
    // 模拟查询表单生效
    dispatch({
      type: 'list/fetch',
      payload: {
        count: 5,
      },
    });
  },

import SetMemberAppAction from "../../components/SetMemberAppAction";
import ScrollerX from "../../components/ScrollerX";
import AddVarModal from "./setting/env";
import ConfirmModal from "../../components/ConfirmModal";
import globalUtil from "../../utils/global";


const FormItem = Form.Item;
import {
  getStatus,
  restart
} from '../../services/app';
import { width } from "window-size";
const RadioGroup = Radio.Group;

@connect(
  ({ user, appControl, teamControl }) => ({
    currUser: user.currentUser,
    innerEnvs: appControl.innerEnvs,
    startProbe: appControl.startProbe,
    runningProbe: appControl.runningProbe,
    ports: appControl.ports,
    baseInfo: appControl.baseInfo,
    // tags: appControl.tags,
    appDetail: appControl.appDetail,
    outerEnvs: appControl.outerEnvs,
    teamControl,
    appControl,
  }),
  null,
  null,
  { withRef: true },

import React, { PureComponent, Fragment } from 'react';
import {
  Button, notification, Tooltip, Radio
} from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import globalUtil from '../../utils/global';
import { Link } from 'dva/router';
import httpResponseUtil from '../../utils/httpResponse';
import ConfirmModal from '../../components/ConfirmModal';

import appUtil from '../../utils/app';
import { buildApp } from '../../services/createApp';
import AppCreateMoreService from '../../components/AppCreateMoreService';

@connect(({ user, appControl, teamControl, createApp }) => ({}), null, null, { withRef: true })
export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      //property、deploy
      type: 'property',
      appDetail: null,
      data: null,
      JavaMavenData: [],
      is_deploy: true,
      buildState: false
    }
  }
  componentDidMount() {
    // this.loadDetail();
    this.getMultipleModulesInfo();

import React from 'react';
import { connect } from 'dva';
import globalUtil from '../utils/global';

@connect()
export default class Index extends React.PureComponent {
  componentWillMount() {
    const currTeam = globalUtil.getCurrTeamName();
    const currRegion = globalUtil.getCurrRegionName();
    // 获取群组
    this.props.dispatch({
      type: 'global/fetchGroups',
      payload: {
        team_name: currTeam,
        region_name: currRegion,
      },
    });

    this.props.dispatch({
      type: 'global/saveCurrTeamAndRegion',
      payload: {

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;
    console.log({
        type: 'login/login',

import AddGroup from '../../components/AddOrEditGroup';
import globalUtil from '../../utils/global';
const { Option } = Select;
const { TextArea } = Input;


const formItemLayout = {
	labelCol: {
		span: 5,
	},
	wrapperCol: {
		span: 19,
	},
};

@connect(({ user, global, loading }) => ({
	groups: global.groups,
	createAppByDockerrunLoading: loading.effects['createApp/createAppByDockerrun']
}), null, null, { withRef: true })

@Form.create()
export default class Index extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			codeType: 'Git',
			showUsernameAndPass: false,
			showKey: false,
			addGroup: false,
		}
	}
	onAddGroup = () => {

)}
        
    );
  }
}

@connect(
  ({ user, appControl }) => ({ currUser: user.currentUser }),
  null,
  null,
  { withRef: true }
)
export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const data = this.props.data;
    return (
      <div>
        </div><table style="{{">
      </table>

import React, { PureComponent } from "react";
import { Form, Radio, Switch, Input } from "antd";
import { connect } from "dva";
const RadioGroup = Radio.Group;

@connect(null, null, null, { withRef: true })
class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        webType: "",
        nodeType: "",
        nodeBuildType: "",
    }
  }

  onRadioNodeBuildTypeChange = e => {
    this.setState({
      nodeBuildType: e.target.value
    });
  };

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

@connect(() => ({}))
class Overview extends PureComponent {
  render() {
    return Overview;
  }
}

export default Overview;

import React,{ Component } from "react";
import { connect } from "dva";
import { View } from "@/components/flexView";
import styles from './empty.css'
@connect()
export default class Empty extends Component {
    render() {
        return (
            
        )
    }
}