dva-model创建工具

• 用于创建dva model
• Action类型支持

安装

//npm
npm install @perfylee/dva-model

//yarn
yarn add @perfylee/dva-model

使用

在umi中使用时的注意事项

• 跳过model验证，避免动态创建的model无法自动加载 .umirc.ts

{
    //...
    dva: {
        skipModelValidate: true,
    }
}

• 关闭model中的action名称包含命名空间时的警告app.tsx

export const dva = {
    config: {
        namespacePrefixWarning: false,
    }
}

model.ts

创建model

import { createModel, actionCreatorFactory } from '@perfylee/dva-model'

interface User {
    id:string
    name:string
}

interface State{
    users:User[]
}

export const namespace = 'user'

const actionCreator = actionCreatorFactory(namespace)
//actions
const set = actionCreator<Partial<State>>('set')
const query = actionCreator('query')
const add = actionCreator<User>('add')

const initState:State = {
    users:[]
}

const model = createModel(namespace,initState)
    .reducer(set, (state, { payload }) => ({
        ...state,
        ...payload,
    }))
     .effect(query, function* ({ }, { put }) {
        //远程方法获取users
        const users = yield Service.GetAll()
        yield put(set({users}))
    })
    .effect(add, function* ({ payload }, { put }) {
        //远程方法添加user
        const result = yield Service.Add(payload)
        if(result === success){
            yield put(query())
        }
    })

export {User}

export const actions = {set,query,add}

export const selector = model.selector

export default model

page.tsx

在页面中使用

import {useEffect} from 'react'
import {useSelector,useDispatch} from 'umi'
import {actions,selector,User} from './model'


function pageIndex(){
    //State & Loading
    const dispatch = useDispatch()
    const {users,loading} = useSelector(selector)
    const {query,add} = actions

    function onSave(user:User){
        dispatch(add(user))
    }

    function onQuery(){
        dispatch(query())
    }

    useEffect(()=>{
        onQuery()
    },[])

    return (
        <>
            <!--表单-->
            <>
                 <!--form:Form<User>-->
                 <Button 
                    loading={loading[add.type]} 
                    onClick={onSave(form.values)}
                >
                    保存
                </Button>
            </>
            
            <!--列表-->
            <>
                <Button 
                    loading={loading[query.type]} 
                    onClick={onQuery}
                >
                    查询
                </Button>
                {uses.map(user=> <div key={user.id}>{user.name}<div/>)}
            </>
        </>
    )
}

export default pageIndex