调数据主要流程

主要流程

1.查看接口文档：

2.根据接口文档的参数编写services

export function fetchUserOperator({page,page_rows,name,username}) {
  return request('/api/admin/sports/Operator/getOperatorUserList', {
      method: 'POST',
      body: JSON.stringify({
        page,
        page_rows,
        name,
        username
      }),
      /**请求头,有请求参数时要加(不同后端不同请求头) */
      headers: {
        'Content-Type': 'application/json'
      }
  });
}

3.根据接口文档返回的数据编写models

接口文档返回的数据示例：

编写models：

import * as operatorServices from '../services/operator';
/**将services里面的全部请求函数作为引入到该文件中*/
export default {
  /**同一个命名空间下可以有很多数据 */
  namespace: 'operator',
  state: {
    userOpeList:{},
  },

  effects: {
/**effects里面也可以有很多方法*/
    *fetchUserOperator({ payload }, { call, put }) { 
      const {data} = yield call(operatorServices.fetchUserOperator, payload);
      if(data && data.code === 200) {
        yield put({
          type: 'save', 
          payload: {
              userOpeList: data.info 
          }
        });
      } 
    },
  },
  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },
};

在index.js中引入该model文件

4.编写组件

把store中的数据与组件connect起来，

export default connect((state)=>{
  return{
    userOpeList:state.operator.userOpeList
    /**命名空间operator下的userOpeList数据 */
  }
})(AddOperator);

组件触发动作：

componentDidMount() {
      this.props.dispatch({
        type:'operator/fetchUserOperator',
        /**model中,命名空间operator下的effects里面的fetchUserOperator方法 */
        payload:{
          page:1,
          page_rows:PAGE_SIZE,
        }
      })
    }