004-ant design -dispatch、request、fetch

一、dispatch 函数

typedispatch = (a: Action) => Action

dispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。

在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者Effects，常见的形式如：

dispatch({

  type:'user/add', // 如果在 model 外调用，需要添加 namespace

  payload: {}, // 需要传递的信息

});

二、页面过程梳理

页面→dispatch→model→service

在页面的生命周期中使用this.props，可以获取到dispatch。这里dispatch通常调用models模型。

页面的调用

    const { dispatch } = this.props;
    dispatch({
      type: 'xxModel/fetch',
      payload: { ...params },
    });

model调用

import {  queryList,} from '@/services/xxServiceApi';
 
export default {
  namespace: 'xxModel',
 
  state: {
    data: {
      list: [],
      pagination: {},
    },
  },
 
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryList, payload);
      yield put({
        type: 'serverHandler',
        payload: { data:response.data },
      });
    },
  },
 
  reducers: {
    serverHandler(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

service调用【在services文件夹下，xxServiceApi.js】

import request from '@/utils/request';
 
export async function queryList() {
  return request('/api/xxServiceApi');
}

三、其他处调用ajax请求

1、原生或者jquery工具类

2、调用service方法

如上述service如何使用

import { queryCurrent } from '@/services/xxServiceApi';
 
export function getXXData() {
    let userService = queryCurrent().then(p => {
        console.log('data',p)
   }
}

因为默认request同，dva的fetch一样返回的都是promise

这个可以直接使用then处理即可