Umijs中davJS的学习

最近公司新项目用的UmiJs3.x，整个项目的数据，通过内置的Davjs来控制。

昨天自己分析了一下Davjs。但是脑海中的概念还是很模糊。今天再梳理一下。

第一步

首先是在Models文件夹下创建一个JS文件

const GlobalModel = {
    //model的名称
  namespace: "global",
  state: {
      //放数据的地方
      user:{}
  },
  effects: {
    // 异步处理数据，不能直接修改数据，需要通过put调用reducers的方法。
     //其中call和普通是dva 提供的effect 函数内部的处理函数
      //call：执行异步函数， put：发出一个 Action，类似于dispatch 、 select获取数据，
      
       //这里使用的generator函数，处理异步的，*和yield 就相当于async await 
      *getTableData({ payload }, { put, select, call }) {
          
 const tableList = yield select((state) => state.global.tableData);
      yield put({
        type: "setTableParams",
        payload,
      });
      
  },
  reducers: {
   //同步处理数据
      setTableParams(state) {
          return {
              ...state
          }
      }
  },
};
export default GlobalModel;

第二步

对应页面中

import React from "react";
import { connect } from "umi";

const TableDemo = (props) => {
    
    //能直接获取到users
    const {dispatch, users} = props
    
    dispatch({
        //global这个model中，getTableData这个异步操作函数
      type: "global/getTableData",
      payload: {
      },
    });
    
    
    return (
    <div>
        {users.name}
    </div>
    )
}

//把global中state中的数据绑定到页面的props上
export default connect(({ global }) => ({
  users: global.users
}))(TableDemo);

**还可以调用Service文件夹里的接口，获取数据