react学习笔记 (三) umi.js redux 异步(effects)请求接口

@[TOC](umi.js redux 异步(effects)请求接口 )
接上文react创建的三种方式, 重定义router 路由的两种方式

react版本 react@17.0.2 | MIT | deps: 2 | versions: 739 // npm info react
node版本 v16.4.2 // node -v
yarn版本 1.22.11 // yarn -version
dva版本 dva-cli version 0.10.1 // dva -v
nmi版本 ^2.9.0 // umi -v
react创建的三种方式: https://blog.csdn.net/lxw_hk2_zy/article/details/122297669
重定义router 路由的两种方式: https://blog.csdn.net/lxw_hk2_zy/article/details/122301216
umi.js redux 异步(effects)请求接口 https://blog.csdn.net/lxw_hk2_zy/article/details/122302297

1, 更改 .umirc.ts 文件

  plugins: [
    ['umi-plugin-react', {
      dva: {
        immer: true,
      }
    }]
  ]

文件夹目录

2, index.js

import React, { Component } from 'react';
import {Button} from 'antd';
import styles from './style.css';
import { connect } from "dva"; //从dva中导入connect

class TestTest extends Component {
  state = {
    text:""
  };
  componentDidMount() {
    // 调用接口
    this.referSend();
  };
  referSend = ()=>{
    const { dispatch } = this.props;
    this.setState({
      text:'正在发送请求...'
    })
    dispatch({
      type: 'testModel/findTestData',
      payload: {
      },
      callback: (res) => {
        this.setState({
          text:res.res
        })
      },
    });
  }
  render() {
    const { text } = this.state;
    return (
      <div>
        <Button >
          font : {text}
        </Button>

        <Button onClick={this.referSend}>
          重新发送请求
        </Button>
      </div>
    );
  }
};
const mapStateToProps = (state) =>{
  return {
      example:state.example, //这里的example表示后面用this.props.example获取state（根节点）中exmpale命名空间（model的example.js中的state所有数据）的数据
  }
}
export default connect (mapStateToProps)(TestTest) //通过这种方式来把model层的数据传递到当前组件了

3, model.js

这里用的假数据

import { findTestData } from "./service";
import { message } from 'antd';

export default {
  namespace: 'testModel',
  state: {
  },
  effects: {
    // 获取数据x
    * findTestData({ payload, callback }, { call, put }) {
        // const res = yield call(findTestData, payload);
        // res.status == 1 ? message.success(res.msg) : message.error(res.msg);
        // if(callback && res.status == 1) callback(res);
        
        callback({status:1,res:'从接口中取到的数据'})
    },
  },
  reducers: {
  },
};

4, service.js

import axios from 'axios';

// 获取数据
export async function findTestData(params) {
  return await axios.post('/test/findTestData', params).then((response) => {
    return response.data.result;
  }).catch(err => console.error(err));
}