AntD Pro v5 protable表格加载状态loading效果

看了一个阿里大佬写的文档，发现并没有描述的清楚，尤其是对react基础不熟的初学者来说,state的运用即可实现各种组件状态的控制。

昨天晚上写完一个查询表格，发现数据的加载需要一定时间，而表格未加载进数据时会呈现出暂无数据的尴尬状态，加一个loading效果能更好地缓冲尴尬。

需要修改的地方有这处：
因为数据的载入我模仿的是前端有model层的方案，所以先给出这一个：

index.tsx

class ADUserPage extends Component {
     

  componentDidMount() {
     
    this.loadData();  // 加载数据
  }

 //获取AD域用户列表
  loadData() {
     
    console.log('页面方法 loadData');
    //使用connect后，dispatch通过props传给了组件
    const {
      dispatch } = this.props;
    dispatch({
      type: 'ad/fetchADUserList', payload: [] });
  }
...
...
render() {
     
    const {
      ad } = this.props;
    const {
      ADUserList, loading } = ad;
...
...
}

return (
      <PageHeaderWrapper>
        <ProTable
          headerTitle="AD域用户列表"
          rowKey="sam"
          columns={
     columns}         // 列名
          dataSource={
     ADUserList}   // 数据源
          search={
     true}             // 搜索
          scroll={
     {
      x: 1300 }}      // 滑动轴
          pagination={
     true}         // 分页
          loading={
     loading}         // 加载中
...
...
//使用umi的connect方法把命名空间为 visual 的 model 的数据通过 props 传给页面
export default connect(({
      ad }) => ({
      ad }))(ADUserPage);

models

import {
      fetchADUserList } from '@/services/ad';
import {
      message } from 'antd';

export default {
     
  namespace: 'ad',
  state: {
     
    ADUserList: [],
    loading: true, // 表格加载标记，初始化值为true
  },
  effects: {
     
    *fetchADUserList({
      payload }, {
      call, put }) {
     
      console.log('model-effects-fetchADUserList');
      const response = yield call(fetchADUserList, payload);
      if (response.code === 0) {
     
        yield put({
     
          type: 'setUserList',
          payload: response.body,
        });
      } else {
     
        message.error(response.message);
        yield put({
     
          type: 'setUserList',
          payload: [],
        });
      }
    },
  },
  reducers: {
     
    setUserList(state, action) {
     
      return {
     
        ...state,
        ADUserList: action.payload,
        loading: false, // 表格加载标记，数据载入完毕设为false
      };
    },
  },
};

浅显的总结：

---

只需要搜索loading字样就知道所有需要修改的地方了！
主要是在Model层发请求前将表格loading标记初始化为true，然后后端传过来数据后到reducers这里时候将标记设置为false；

然后index页面用umi的connect将命名空间为 visual 的 model 的数据通过 props 传给页面，这里传给页面的数据就包含loading；

到目前为止，我对于props state 和reducers还不是很清楚，不过模仿写过index->model->service->后端url 流程的查询接口和index->service->后端url 忽略了model层的post接口