Redux与获取后台数据相结合

Redux与获取后台数据相结合

一、安装Axios

npm install --save axios

这里的代码进行了组件UI和业务逻辑的拆分，具体方法可参考：https://www.jspang.com/detailed?id=48#toc257：P13进阶：组件UI和业务逻辑的拆分方法，我也是根据此教程进行学习整理的。

二、TodoList.js

1、引入axios

import axios from 'axios'

2、在组件的声明周期函数里componentDidMount获取远程接口数据

componentDidMount() {
   
  //这里的接口是我们自己项目中的地址，你可以自己找其他接口或者自己写一个mock假数据
  axios.get('http://sy.aerozhonghuan.com:81/test/qdfaw/api/qingqi/sellbusiness/queryDataDictList?code=VOD1').then((res) => {
   
        const data = res.data.data;
        const action = getListAction(data)
        store.dispatch(action)
  })
}

3、完整代码示例：

import React, {
    Component } from "react";  
import 'antd/dist/antd.css'
import store from './store/index' 
import {
    changeInputAction, addItemAction, delItemAction, getListAction } from './store/actionCreators'
import TodoListUI from './TodoListUI'  //ui拆分
import axios from 'axios'

class TodoList extends Component {
      
    constructor(props) {