使用Redux-thunk中间件实现ajax数据请求

1.先安装redux-thunk依赖
npm install redux-thunk
yarn add redux-thunk
redux-thunk的GitHub网址 ： https://github.com/reduxjs/redux-thunk

2.接下来我们要引入配置redux-thunk这个中间件参考上面GitHub的网址上的文档
3.打开store文件夹下的index文件引入redux-thunk和配置redux开发者工具
import {
      createStore , applyMiddleware , compose } from "redux";
import reducer from "./reducer";
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
     }) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk)
  );
const  store = createStore(reducer,enhancer);
export default store;

4.配置好后我们把组件里的异步代码移除，把异步代码移除到action中去
5.接下来我们打开actionCreators.js,当我们引用了Redux-thunk后action可以是一个函数
之前的action都是返回一个对象，现在可以用Redux-thunk返回一个函数
代码如下：
export const getTodoList = () => {
     
    return () => {
     
        axios.get('http://yapi.demo.qunar.com/mock/38353/app')
        .then((res) =>{
     
            const data = res.data;
            })
        .catch(() =>{
     alert('err')})
    }
}
6.此时我们发现getTodoList这个函数该怎么调用呢
7.接下来我们就要返回到TodoList这个组件中去调用，首先引入这个方法
import {
      getInputChangeAction , getAddItemAction , getDeletItemAction ,getTodoList} from './store/actionCreators.js';
8.然后我们在componentDidMount这个生命周期函数中引用getTodoList这个函数 代码如下 ：

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

9.接下来我们返会到actionCreators.js中编写异步代码记得引入axios的包
import axios from 'axios';
10.那store中的List数据应该怎么改变呢，此时我们又要发送action啦代码如下：
const action = initListAction(data)
11.我们发现actionCreators并没有store的dispatch方法，当调用getTodoList时会生成一个内容似的函数时，这个函数能接收到stored的dispatch方法，我们直接调用dispatch法方就可以了 代码如下
export const getTodoList = () => {
     
    return (dispatch) => {
     
        axios.get('http://yapi.demo.qunar.com/mock/38353/app')
        .then((res) =>{
     
            const data = res.data;
            const action = initListAction(data)
            dispatch(action);
            })
        .catch(() =>{
     alert('err')})
    }
}