Umi和Dva数据流如何使用(Typescript)

Umi和Dva数据流如何使用

model.ts

/*
 * @Descripttion: 
 * @Author: mikasa
 * @Date: 2020-11-29 11:29:43
 */
import {Reducer,Effect,Subscription} from 'umi'
import { getRemoteList } from './service'
interface UserModelType{//约束
    namespace:'users',
    state:{},
    reducers:{
        getList:Reducer
    },
    effects:{
        getRemote:Effect
    },
    subscriptions:{
		setup:Subscription
    }
}
const UserModel:UserModelType = {
    namespace:'users',//命名空间
    state:{},//初始值
    reducers:{//同步
        getList(state,{payload}){
            return payload
        }
    },
    effects:{//异步
        *getRemote({payload},{put,call}){
            const data = yield call(getRemoteList)
            yield put({
                type:'getList',
                payload:data
            })
        }
    },
    subscriptions:{//订阅
    	setup({dispatch,history},done){
            history.listen((location,action)=>{
                if(location.pathname === '/users'){
                    dispatch({
                        type:'getRemote'
                    })         
                }
            })
        }
	}
}
export default UserModel

service.ts

import { request } from 'umi'
export const getRemoteList = async params =>{
    return request('http://public-api-v1.aspirantzhang.com/users',{
        method:'get',
        params:{page:1}
    }).then(res=>{
        return res;
    }).catch(err=>{
    })
}

index.tsc

function index({users}) {
    return (
        <div className='list-table'>
            <Table columns={columns} dataSource={users.data}/>
        </div>
    )
}
const mapStateToProps = ({users}) =>{
    return{
        users
    }
}
export default connect(mapStateToProps)(index)