Redux学习之旅九：Redux-thunk的使用

将后台请求数据放到中间件中来实现。

在actionCreaters.js中引入axios：

import axios from 'axios';

新增一个函数getTodoList，将axios请求数据放到这里：

export const getTodoList = ()=>{
    return (dispatch)=>{
        axios.get('/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')
            .then((res) => {
                console.log(res.data.data);
                const data = res.data.data;
                const action = getListAction(data);
                dispatch(action);
            })
            .catch((error) => {
                console.log('axios获取数据失败' + error)
            })
    }
}

在TodoList.js中引入getTodoList方法：

import { changeInputAction, addItemAction, deleteItemAction, getListAction, getTodoList} from './store/actionCreaters';

修改componentDidMount：

componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);
}

运行项目可以成功获取到数据。