【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.整個流程便完成了.