[JavaScript知识库]umi dva 基本使用

umi dev的基本逻辑

页面事件触发，使用dispatch调用models的某个命名空间中的方法，model再调用services中的接口，将需要共享的数据put到state共所以使用该model的组件使用(不需要共享则可以忽略)，将需要回调的数据放入callback中，然后在组件的callback中就可以对返回值进行一系列的操作了。

案例

pages/dev

import React, { useEffect } from 'react'
import { connect } from 'umi';
import { Button } from "antd"

const dva: React.FC = (props: any) => {
  // props中的data为models中的state
  const { dispatch, data: { data } } = props
  const getData = () => {
    // 使用model获取数据 
    dispatch({
      type: "data/getData", // model的命名空间/方法(effects中*后面的为方法名)
      payload: null, // 传的参数 在对应models中的effects可以拿到
      callback(res: any) { // res为传给callback的值
        console.log("callback", res);
      }
    })
  }
  useEffect(() => {
    console.log(data);
  }, [])
  return (
    <div>
      <h1>dva使用</h1>
      <Button onClick={getData}>获取data</Button>
    </div>
  )
}
// 默认导出
// export default dva
// 当使用 connect()导出时umi默认会把dispatch和state(state为data)放入函数的props中
export default connect((data: any) => data)(dva) // 第一个参数的(data: any) => data为固定写法 是state传给props中的data

models/dev

import { getData } from "../services/dav"
import { Effect } from 'umi';

// 定义这个model的类型 Effect为effects对象中每个属性的类型
export interface davType {
  namespace: string;
  state: any;
  effects: {
    getData: Effect;
  };
  reducers: any;
}

const davModel: davType = {
  namespace: 'data', // 调用modle时 通过命名空间调用 不能与其他modle的命名空间重名

  state: { // 状态 与react中 state类似 和 redux中保存的state一样
    data: {}
  },

  effects: { // 调用services中的方法 获取数据
    // *后面为这个方法的名字 payload接收的参数 callback回调函数 put将获取到的数据传给reducers call让我们访问外部的方法如获取数据的方法
    *getData({ payload, callback }, { call, put }) {
      // call(请求的方法,请求的参数) 参数通常为payload * yield实现同步效果 类似async await
      const response = yield call(getData, payload)

      // 调用reducers中对应的方法 并传递数据
      yield put({
        type: "setData", // 类似 redux 中的 action 的type
        payload: response // 请求的数据
      })
      // 如果response有数据 callback就返回response 没有则返回{}
      if (callback) callback(response ? response : {})
    }
  },

  reducers: { // 更新state中保存的数据
    // state为当前对象的state  action{type:请求的接口,payload:effects中put的payload}
    setData(state: any, action: any) { // action中包含put过来的数据
      // 返回值会替换state
      return { ...state, data: action.payload }
    }
  },
}

export default davModel

services/dev

import { request } from "umi"

export async function getData() {
  const data = await request("/api/index")
  console.log(data);

  return data
}