Dva.js 使用介绍

Dva里面最重要的是Model

我们先说Model

1） dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects

新建一个model.js

import { getknowledgeList } from '@/services/wrongQuestions' //引入我们的service

export default {
  namespace: 'products',
  state: {
    getTopicType: [],
    num:1
  },
  reducers: {
    fetchAfter(state, action) {
      return Object.assign({}, state, action.payload)
    },
  },
  Effect: {

      //call：执行异步函数
      //put：发出一个 Action，更新store，类似于 dispatch
      //select ：可以获取当前model中的state

     *addAfter1Second(action, { call, put, select }) {
     const { num } = yield select( (state) => {
        return state.products;
      } );
      const queryCourseList = yield call(getknowledgeList, payload);
      yield put({   //储存数据
        type: 'fetchAfter',
        payload: {
          getTopicType: queryCourseList.data
        }
      });
  }
};

这个 model 里：namespace 表示在全局 state 上的 key（model的名字）

• state 是初始值，在这里是空数组        （存放数据的地方）
• reducers 等同于 redux 里的 reducer，接收 action，同步更新 state   （处理同步操作,修改 state）
• effect 接收 action,用来处理异步操作的,effect是一个 Generator 函数内部使用 yield 关键字，标识每一步的操作（不管是异步或同步）（我们自己的ajax接口 就是写在这里)

          

2） 多任务调度

• 并行，若干个任务之间不存在依赖关系，并且后续操作对它们的结果无依赖
• 竞争，若干个任务之间，只要有一个执行完成，就进入下一个环节
• 子任务，若干个任务，并行执行，但必须全部做完之后，下一个环节才继续执行

我这里通过以下代码来实现

yield put({ type: 'fetch/start'  });
yield put({
  type: 'fetchAfter',
  payload:{
    topicSource:action.payload.topicSource
  },
});
yield ( yield put({type:'getTopicList'}) );
yield put({ type: 'fetch/end'  });