封装loading解决前后端交互页面不刷新问题 react+dva

引言

当我们在开发中修改后台数据（添加，删除）时，经常会碰到页面不刷新问题

解决办法

解决办法很简单，重新调用一下接口，然后：wdnmd，还没刷新。最简单的，在store处理数据加个loading。我使用dva。

const Product = {
  namespace: 'product',
  // 定义
  state: {
    loading: true,
  },
  // 同步操作唯一修改state的地方
  reducers: {
 	// 事件
    changeLoading(state, action) {
      return {
        ...state,
        loading: action.payload,
      };
    },
  },
// 处理异步操作和业务逻辑
  effects: {
    *getProducts({ payload }, { call, put }) {
      // 请求成功前
      yield put({
        type: 'changeLoading',
        payload: true,
      });
      const response = yield call(produuctService.getProducts, payload);
      yield put({
        type: 'restate',
        payload: {
          productList: Array.isArray(response.data.pageResult) ? response.data.pageResult : [],
        },
      });
      // 请求成功后
      yield put({
        type: 'changeLoading',
        payload: false,
      });
    },

export default BaseLine;

那当我们页面使用这个接口时，只需要判断这个loading，可以结合antd 组件使用

connect后：

const { loading } = props;
<div>
	{
		loading ? <Spin /> : 根据数据渲染
    }
</div>

好了！