React + Dva.js 使用

Dva简介：Dva是基于redux和redux-saga的数据流方法，并且内置了react-router和Fetch,

    说白了就是融合了 redux+redux-saga+react-router    

    dva = React-Router + Redux + Redux-saga

Dva详细介绍请看官方Api：https://dvajs.com/guide/

1）.在Dva中主要分为3层，services，models，components

    services：请求后台的接口

import { get,post } from '@/utils/request';
import { pathJoin } from '@/utils/utils';
import { ErrorBookPrefix, prefix } from '@/services/config';


/*获取班级列表接口*/
export const getClassList = (params) => {
  return get(pathJoin(prefix,ErrorBookPrefix, '/classes/class/getClass/v1.0'),{
    ...params
  });
};

这里对fetch做了封装

request.js

/**
 * 封装 POST 请求
 * @param {String} url
 * @param {Object} data
 */
export const post = (url, data, isJsonString) => { 
  data = Object.assign({}, defaultParams, data);
    return request(url, {
      method: "POST",
      credentials: "include",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        Accept: "application/json, text/javascript, */*; q=0.01", 
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        'X-XSRF-TOKEN':cookie.get('XSRF-TOKEN')
      }, 
      body: objToSearch(data)
    });
};

     models：是最重要概念，这里放的是各种数据，与数据交互的应该都是在这里

   以下是个常见例子

    

//*第1步.引入我们定义的services
import {
 courseLists
} from '@/services/wrongQuestions'


export default {

   //namespace：当前 Model 的名称。整个应用的 State，用于解决多个models之间 的互相干        
      扰的问题，我们存储所有数据都会在这个空间下。
  namespace: 'wrongQuestions', 

  //state：该Model 当前的状态。数据保存在这里，直接决定了视图层的输出
  state: {    
    loading: false,
  },

  //reducers:处理同步操作,修改 state,由 action 触发,有state 和 action 两个参数
  reducers: { 
    'fetch/start'(state) {
      return {
        ...state,
        loading: true
      };
    },
    'fetch/end'(state) {
      return {
        ...state,
        loading: false
      };
    },
    fetchAfter(state, action) {
      return Object.assign({}, state, action.payload)
    },
  },

  //effects:处理异步动作，直接修改 state，由 action 触发
  effects: { 
  
    //*第2步 定义一个courseList的effects，注意这个函数名称前面要有“*”
    * courseLists({ payload }, { call, put, select }) { //put 用于触发 action，call 用于调用异步处理逻辑

      //yield表示同步调用，这个是generator提供的功能
      yield put({ type: 'fetch/start' });
      const queryCourseList = yield call(getErrorBookcList, payload) //call调用数据接口方法和请求参数
      yield put({  //储存数据
        type: 'fetchAfter',
        payload: {
          getTopicType: queryCourseList.data
        }
      });
      yield put({ type: 'fetch/end' });
    }
  }
}

 

components组件：

我们已经单独完成了 model 和 component，那么他们如何串联起来呢?

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect

import React, { Component } from 'react'
import { connect } from 'dva';

class myClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
     
    }

  componentDidMount= () => {
    const { dispatch } = this.props;
    dispatch({ type: 'myClass/getClassType' })
    this.state.schoolYear &&
    dispatch({
      type: 'myClass/courseLists',
      payload: {
        year: this.state.schoolYearId,
        classType: this.state.classListid,
        isMy: this.state.isMy
      }
    })
  }
  }
}

export default connect(({ wrongQuestions}) => ({
  myClass
}))(myClass);