umi使用

umi是react快速开发的框架，里面包含了react,antd,redux等组件

项目代码
https://github.com/iosKey/umi

全局安装umi

yarn global add umi

创建umi项目（在空的文件夹）

yarn create umi
选择ant-design-pro
选择JavaScript
安装依赖
yarn install
启动
yarn start

src/pages创建more/index.js和index.less

umi g page more/index --less
启动
umi dev

pages/more/index.js

import React, { Component } from 'react'
import styles from './index.less';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Form, Input, Table, Button } from 'antd';
import {connect} from 'dva'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'city',
    key: 'city',
  },
];

class More extends Component {
  componentDidMount(){
    //connect里面定义的方法
    this.props.getMoreData();
  }
  search = ()=>{
    //获取表单和 connect定义的函数
    const {form,data,getMoreDataBySearch} = this.props;//从more对象取出data
    //获取表单里面的值
    const {getFieldValue} = form;
    //传入的参数是对象
    getMoreDataBySearch({name: getFieldValue('name')});//name是描述哪个输入框
  }
  render() {
    const {form,data} = this.props;
    const {getFieldDecorator} = form;
    return (
      <div className={styles.more}>
        <PageHeaderWrapper>
          <Card>
            <Form>
              <Form.Item label="姓名">
                {/* 获取输入框的值 */}
                {getFieldDecorator('name')(<Input/>)}
              </Form.Item>
            </Form>
            <Button type="primary" onClick={this.search}>查询</Button>
          </Card>

          <Card>
          {/* columns是横项菜单的数据 */} 
          {/* dataSource才是列表内容 */}
          {/* record是每一项的对象 record.id作为key */}
            <Table dataSource={data} columns={columns} rowKey={record=>record.id}/>
          </Card>
        </PageHeaderWrapper>
      </div>
    )
  }
}

export default connect(
  //mapStateToProps
  ({more}) => ({...more}),//reducers返回的对象 由于命名空间包了一层more.data
  {
    //mapDispatch
    getMoreData:()=>({type: 'more/getMoreData'}),//more是model里面namespace 后面是定义的方法
    getMoreDataBySearch:(name)=>({type:'more/getMoreDataBySearch',search:name})//带参数的方法
  }
)(Form.create()(More));

models/more.js

//写了两个独立的方法去mock数据
import {getChannelData,getChannelDataBySearch} from '@/services/channel'
//创建model
const model = {
    namespace: 'more',//命名空间
    state:{
        data: [],
    },
    //定义两个方法 saga的写法
    effects:{
        *getMoreData({payload},{call,put}){
            //异步get请求 调用getChannelData方法
            const res = yield call(getChannelData);
            //更新状态 dispatch
            yield put({
                type: 'moreData',//调用reducers里面的moreData 
                payload: res//请求结果
            })
        },
        *getMoreDataBySearch({search},{call,put}){
            const res = yield call(getChannelDataBySearch,search);
            yield put({
                type: 'moreData',
                payload: res
            })
        }
    },
    reducers:{
        moreData(state,{payload}){
            //payload.data就是数据的数组
            console.log([...payload.data]);
            return {...state,data:[...payload.data]}
        }
    }
};
export default model;