【dva】dva的基本用法

services

该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数)

const finishTask = {
  query: (params) =>
    request({ url: '/app/data, method: 'POST', data: params })
};
export{
  finishTask 
}

 

models

该文件夹为dva的核心之一,这个文件夹里主要是存储数据、处理数据等关键功能的地方.他的写法如下

export default {
  namespace: "base", //model的名称,必须是唯一的标记
  state: {   //数据
    list:[]
  },
  subscriptions: {
    setup({ dispatch, history }) {  
      return history.listen(({ pathname }) => {//当history发生变化时就会进入到此函数
        //可以在此函数中根据pathname的变化去dispatch
      });
    },
  },
  effects: {
    *getData({ payload = {} }, { select, call, put }) {
      const data = yield call(query,payload); //query就是services里面的函数,需要从services里面import
      const list = yield select((state) => state.base.list); //从本model里面获取state里面的list
      yield put({
        type: 'save', payload: {
        list:data
      } });//通过reducers去修改本model里面的数据
    }
  },
  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };//必须返回一个新的action
    }
  }
};

 

view

接下来讲如何在view端,即页面或者组件中去使用models里面的函数和数据

import { useSelector, useDispatch } from 'dva';

 1.useSelector

这个函数的作用是拿到models里面的state

 const {list}= useSelector((state) => state.base);

2.useDispatch

这个函数会返回你一个dispatch函数,

 const dispatch = useDispatch();

 拿到这个函数之后你可以通知models里面的effect对应的函数执行

 dispatch({
      type: 'base/getData', //必须传一个type告诉dva你要执行哪个model里面的那个effect
      payload: {
        id:1            //写上你要传的参数
      },
    });

 

只要你发起了dispatch,effect便会执行services里面的函数去调接口,然后再根据effect里面写的逻辑去处理数据,接着通过reducers里面的函数返回一个新的action去通知view有更新.view拿到新的action之后便会重新渲染,这个时候useSelector会重新执行一遍拿到新的state.整个流程便完成了.