antd pro 项目中关于dva loading的用法——加载中状态的封装

在antd pro中经常会遇到,在加载后台数据的时候,有一个loading状态,

如果由我们手动去设置的话,将会有这样一个流程:请求开始setState({queryloading:true})并dispatch(),请求结束,根据请求结果,再setState({queryloading:false});如果有实际操作过的朋友,你们会知道这个过程效率低下,,在一次偶然的过程中接触dva loading过渡效果的封装,很好用,它能在你通过connect绑定后,发挥它的效用。

代码中的loadingAll是models的mySpace发生数据交互行为的时候,他会自动置为true,反之为false,

而loadingList是models mySpace effects中的myEffects发生数据交互行为时,他会自动变为true,反之为false,

当然这一切的行为都是基于你通过connect绑定之后的才能生效

import React from 'react';
import {Spin , Table, Button} from 'antd';
@connect(({loading,mySpace})=>({
  loadingAll:loading.models.mySpace,
//当mySpace这个models有数据请求行为的时候,loading为true,没有请求的时候为false
  loadingList:loading.effects['mySpace/myEffects'],
//当mySpace的effects中的myEffects有异步请求行为时为true,没有请求行为时为false
  list:mySpace.list,
}))
//页面上
export default class QueryLoading extends React.Component{
    constructor(props){
       
    }
    queryDATA=()=>{ 
        dispatch({type:'mySpace/myEffects',payload:value});
    }
    render(){
        const {loadingAll,loadingList,list}=this.props;
        loadingAll=loadingAll||false;
        loadingList=loadingList||false;
        list=list||[];
        return(
            
                
        )
    }
}

//models中
export default{
    namespace:'mySpace',
    state:{
       list:[],
    },
    effects:{
       *myEffects({payload},{call,put}){
            const response=yield call(getList,payloading);
           yield put({type:'backList',payload:{response}});
         },
    },
    reducers:{
         backList(state,{payload:{response}}){
            return{...state,list:response.date}
        }
    }
}

共享知识,共享代码,希望这篇文章能帮到您,

文章如有误,请及时指出,谢谢您的反馈 

 

你可能感兴趣的:(ant,design,pro,react,dva,loading)