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(
            <Spin spinning={loadingAll}>
                <Table
                    dataSource={list} 
                    loading={loadingList}
                />
                <Button onClick={this.queryDATA}>请求</Button>
            </Spin>
        )
    }
}

//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}
        }
    }
}

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

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