Basic introduction and use of dvajs

Directory structure ：

1. Synchronously modify the warehouse value

1. src/models/LhTest.ts： Where you define the warehouse

export default {
    
  //  Warehouse inventory value ;
  state: {
    
    global: ' This is a global',
  },
  //  Synchronous operation place ： Modify component common state 
  reducers: {
    
    //  This is your modification state Methods ; Fixed format 
    changeGlobal(state: Object, {
      payload }: any) {
    
      console.log(' This is you through payload The parameters passed in ：', payload)
      return {
    
        ...state,
        global: payload,
      };
    },
  },
};

2. src/pages/index.tsx： Page call

import {
     connect } from 'dva';
import {
     Button } from 'antd';
import React,{
     useState } from 'react';

const IndexPage = (props: any) => {
    
  //  from props To deconstruct  global  and  dispatch  Method 
  const {
     global, dispatch } = props;
  const [numb, setNumb] = useState(0);
  const changeGlobal = (numb:any) => {
    
    setNumb(numb + 1)
    //  This method is in props Inside 
    dispatch({
    
      // type: ' You define model name , The default is your file name , You can also customize it ： namespace'
      // type: /  Then your method name , From  effects  perhaps  reducers  Go inside ; If the names are the same, then effects In looking for （ That is to say  effects  Find first in ; If you find it, you'll end the search ）;
      type: 'LhTest/changeGlobal',
      //  This place is where you spread your knowledge ！
      payload: numb++
    })
  }
  
  return (
    <>
      <Button onClick={
    changeGlobal.bind({
    }, numb)}>ce {
     global }</Button>
    </>
  );
}
//  This step   You can think of it this way , stay  IndexPage  The previous step of page creation ,dva Add a step to it, that is connect The first callback function passed in .
export default connect((state: any) => {
    
  // LhTest  yes  modal name   The default is the file name or your own definition  namespace ;
  const {
     global } = state.LhTest;
  return {
    
    global
  };
  // connect() This function returns a function   Accept a page to be rendered ;
})(IndexPage);

2. Modify the warehouse value asynchronously

1. src/models/LhTest.ts： Where you define the warehouse

import {
     request } from 'umi';
// data  Is the passed parameter 
const user = (data:any) => {
    
  return request(`/user`, {
    
    method: 'POST',
    //  Header information 
    headers: {
    },
    // json Format 
    requestType: 'json',
    // post  Request is for data, get Request is for params
    data
  });
}
export default {
    
  //  Warehouse inventory value ;
  state: {
    
    global: ' This is a global',
  },
  //  Synchronous operation place ： Modify component common state 
  reducers: {
    
    //  This is your modification state Methods ; Fixed format ; When called  ' Module name / Method name '
    changeGlobal(state: Object, {
      payload }: any) {
    
      console.log(' This is you through payload The parameters passed in ：', payload)
      return {
    
        ...state,
        global: payload,
      };
    },
    //  In order to test  effects  Of  put  Method 
    handleSomethingReducers(state: Object, {
      payload }: any) {
    
      console.log('reducers Methods the trigger ,payload:', payload)
      return {
    
        ...state
      }
    }
  },
  //  Asynchronous operation place ： Request interface 
  effects: {
    
    //  Method name , When called  ' Module name / Method name '
    // payload:  The parameters you passed ;
    *getUserInfo({
      payload }: any, {
      call, put }: any) {
    
      // call： The asynchronously requested function accepts two parameters （ first 【user】： Functions called asynchronously 【 Request interface 】 the second 【payload】： Pass parameters into your asynchronous function ）
      //  Return interface information 
      const {
     data } = yield call(user, payload);
      //  Call other methods （ for instance  reducers Inside   Or is it effects Inside , Or other .）
      yield put({
     type: 'handleSomethingReducers', payload: {
     name: 1 } }); // reducers Methods the trigger ,payload: {name: 1}
      yield put({
     type: 'handleSomethingEffects', payload: {
     name: 2 } }); // effects Methods the trigger ,payload: {name: 2}
    },
    //  In order to test  effects  Of  put  Method 
    *handleSomethingEffects({
     payload}:any, {
     call, put}: any) {
    
      console.log('effects Methods the trigger ,payload:', payload)
    }
  },
};

2. src/pages/index.tsx： Page call

import {
     connect } from 'dva';
import {
     Button } from 'antd';
import React,{
     useState } from 'react';

const IndexPage = (props: any) => {
    
  //  from props To deconstruct  global  and  dispatch  Method 
  const {
     global, dispatch } = props;
  const [numb, setNumb] = useState(0);
  const changeGlobal = (numb:any) => {
    
    setNumb(numb + 1)
    //  This method is in props Inside 
    dispatch({
    
      // type: ' You define model name , The default is your file name , You can also customize it ： namespace'
      // type: /  Then your method name , From  effects  perhaps  reducers  Go inside ; If the names are the same, then effects In looking for （ That is to say  effects  Find first in ; If you find it, you'll end the search ）;
      type: 'LhTest/changeGlobal',
      //  This place is where you spread your knowledge ！
      payload: numb++
    })
    dispatch({
    
      type: 'LhTest/getUserInfo',
      //  This place is where you spread your knowledge ！
      payload: {
    
        name: 'zs',
        age: '46'
      }
    })
  }
  
  return (
    <>
      <Button onClick={
    changeGlobal.bind({
    }, numb)}>ce {
     global }</Button>
    </>
  );
}
//  This step   You can think of it this way , stay  IndexPage  The previous step of page creation ,dva Add a step to it, that is connect The first callback function passed in .
export default connect((state: any) => {
    
  // LhTest  yes  modal name   The default is the file name or your own definition  namespace ;
  const {
     global } = state.LhTest;
  return {
    
    global
  };
  // connect() This function returns a function   Accept a page to be rendered ;
})(IndexPage);

3. Namespace

1. You can get multiple folders , It will read by default file Name as default namespace;
2. Modular custom name , Normally, the file name is used as the module , But when the name repeats ？ Will report a mistake ！ Then use namespaces namespace Customize it
   
   The solution is as follows ：
   add to namespace after
   
   Not added namespace
   
   Print the final result ：connect((state)=> {console.log(‘state:’, state)})(IndexPage)
   

3.xxxx（ be on holiday , To be continued …）