umi dva basic use

Hits: 0

The basic logic of umi dev

When a page event is triggered, dispatch is used to call a method in a [namespace] of the models, the model then calls the interface in services, and the data that needs to be shared is put into the state, so the components that use the model are used (can be ignored if they do not need to be shared), Put the data that needs to be called back into the callback, and then you can perform a series of operations on the return value in the callback of the component.

case

pages/dev

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

const dva: React.FC = ( props: any ) => {
   // data in props is state in models 
  const { dispatch, data : { data } } = props
   const getData = () => {
     // use model retrieve data
    dispatch({
      type : "data/getData" , // the namespace/method of the model (the name of the method after * in effects) 
      payload: null , // the passed parameters can get 
      callback(res: any) in the effects of the corresponding models { // res is the value passed to callback 
        console .log( "callback" , res);
      }
    })
  }
  useEffect(() => {
    console.log(data);
  }, [])
  return (
    <div>
    </div>
  )
}
// Default export 
// export default dva 
// When using connect() to export, umi will put dispatch and state (state is data) into the function's props by default. 
// The first parameter of the function of the first parameter is An object, if you want to get a model, you can get the state of the model through the data.model namespace. The return value of this function will be passed to the props of the component in the second bracket of connect. The case is dva 
export  default connect( ( data : any ) => data)(dva) // The first parameter of (data: any) => data is a fixed writing method, which means that state is passed to the data in props

models/dev

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

// Define the type Effect of this model as the type of each property in the effects object 
export interface davType {
   namespace : string;
  state: any;
  effects: {
    getData: Effect;
  };
  reducers: any;
}

const davModel: davType = {
   namespace : 'data' , // When calling modle, the namespace call cannot be the same as the namespace of other modules

  state: { // The state is similar to the state in react and the state saved in redux
    data: {}
  },

  effects : { // Call the method in services to get data 
    // *The name of this method is followed by the parameters received by payload callback callback function put Passes the acquired data to reducers call Let us access external methods such as the method of getting data
    *getData({ payload, callback }, { call, put }) {
      // call(request method, request parameters) The parameter is usually payload * yield to achieve synchronization effect similar to async await 
      const response = yield call(getData, payload)

      // Call the corresponding method in reducers and pass the data 
      yield put({
         type : "setData" , // similar to the type of action in redux 
        payload: response // the requested data
      })
      // If the response has data callback, return the response, if not, return {} 
      if (callback) callback(response ? response : {})
    }
  },

  reducers : { // Update the data saved in the 
    state // state is the state of the current object action{type: requested interface, payload: the payload put in effects} 
    setData(state: any, action : any) { // in action Contains the put data 
      // The return value will replace the 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
}

You may also like...

Leave a Reply

Your email address will not be published.