说一下最近在捣鼓的umi-antdpro和dva(一)

1,236 阅读2分钟

Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。

next.js 是个很好的选择,Umi 很多功能是参考 next.js 做的。但Next.js可能是不够贴近业务,不够接地气。比如 antd、dva 的深度整合,比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。

在做一个后台数据管理的项目的过程中发现,手写造轮子费时又不够美观,而自己进行webpack配置的过程也十分痛苦,最后选择了这个框架进行开发。

开始

npm create umi
>antd pro
>v5

使用插件进行开发

@umijs/plugin-layout 使用antd布局,增加侧边栏

@umijs/plugin-locale 使用国际化,可以在简易开发过程中将其关闭

@umijs/plugin-dva 用dva进行数据流管理

@umijs/plugin-dva

创建文件

src/pages 下,子目录中 models 目录下的文件

src/pages 下,所有 model.ts 文件(不区分任何字母大小写)

model.ts

import { deleteOne, loadAirlineInfo, saveOne,updateOne } from "./service"

export default{
    namespace:'airlineInfo',//命名空间,需要调用effects或者reducer时要加在type之前
    state:{
        list:[],
        current:{},
        showEdit:false,
        isEdit:false,
    },
    //异步数据通过effects处理,调用service里的方法
    effects:{
        *loadData({},{call,put}:any){
            const res=yield call(loadAirlineInfo)
            console.log(res)
            yield put({
                type:'save',
                payload:{
                    list:res.data,
                    showEdit:false,
                    isEdit:false
                }
            })
        }
    },
    //同步数据通过reducers处理
    reducers:{
        save(state:any,{payload}:any){
            return{...state,...payload}
        }
    }
}

index.tsx

interface PageProps extends ConnectProps {
    info:any
}
//继承ConnectProps类型
const AirlineInfo: React.FC<PageProps> = (props) => {
    const { dispatch } = props
    const {list}=props.info
    const intl = useIntl();
    useEffect(() => {
        dispatch({
            type:"airlineInfo/loadData",
            payload:{}
        })
    }, [])
    )//初始化数据
    return ...
}
export default connect((state: any) => {
    return {
        info: state.airlineInfo
    }
})(AirlineInfo)
//connect是一个高阶函数,首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产Component的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect,这样就生产出一个经过包裹的Connect组件