react-dva-antd实现页面loading加载效果


1、预期需要实现效果：

1
为了达到更好的用户交互体验。

在我们渲染表格数据的时候，当表格数据改变的时候我们出现加载效果。非使用Spin组件。当接口在调用的时候，我们去控制loading效果。所以我们在models实现。
使用到的是Table中的loading属性。
在这里插入图片描述
在这里插入图片描述
2、直接贴出代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    loading: true,  =>state


====>effects
  // 查询班级出勤统计数据单天
    *inqui..........({ payload }, { call, put }) {
      yield put({
        type: 'changeLoading',
        payload: true,
      });
      const response = yield call(inqui......, payload);
      yield put({
        type: 'getAllSingle',
        payload: {
          allClassSingleList: response.datas,
        },
      });
      yield put({
        type: 'changeLoading',
        payload: false,
      });
    },
====>reducers
  changeLoading(state, action) {
      return {
        ...state,
        loading: action.payload,
      };
    },
1
在上面的代码中，在接口调用之前将初始值置为true, 当接口调用完全之后再置为false。

3、页面使用不再讲述。