使用Redux-thunk中间件发送ajax请求

这个组件在componentDidMount生命周期函数里进行ajax请求，这么写没什么大问题，但是如果我们把异步请求或者复杂的逻辑都放在组件里实现的时候，组件就会显得过于臃肿，所以遇到异步请求或者复杂的业务逻辑就要把它移到其它的地方进行统一的管理，此时我们就可以移到redux-thunk这个中间件来进行管理，redux-thunk可以把这些异步请求或者复杂的业务逻辑放在action里去处理，redux-thunk是redux的一个中间件。
首先当创建store的时候就可以用这个中间件，先要引入applyMiddleware这个方法，这个方法使得我们可以使用中间件。


实际上，__REDUX_DEVTOOLS_EXTENSION…也是redux的一个中间件，所以可以把它们俩放在数组里一起使用。具体使用看GitHub。
在这里插入图片描述
这样在我们创建redux的store的时候就使用了redux-thunk 中间件，这个中间件是redux的中间件不是react的中间件，我们是在创建了redux的store的时候用的这个中间件。
接着我们就可以把组件里请求数据的代码移到store里的action里了，之前actionCreator.js文件里返回的都是函数，这个函数返回的都是一个对象。当使用redux-thunk的时候，action就也可以返回一个函数了，这个函数里面做异步请求数据的操作，然后在组件里调用store.dispatch(action返回的函数)。


上面构建的action是一个函数，当调用store.dispatch(action)的时候，action就会自动执行，action就是getTodoList方法返回的那个函数，那个函数被执行就会发起请求，然后获取并打印出数据。
接着就是改变store里的数据，实际上，当调用getTodoList生成一个action内容是函数的的时候，这个函数可以接收到store的dispatch方法，所以在函数里就可以直接使用store里的dispatch方法了。

总结：
1，首先安装redux-thunk中间件的安装；
2，创建store的时候使用这个中间件，照着官方的文档一步一步的去配置，

配置完之后我们就既可以用redux-thunk这个中间件又可以使用redux-devtools这个开发者工具。
3，接着我们就可以在action里面写异步的代码了，以前我们创建一个action返回的只能是一个js对象，但是现在当使用redux-thunk之后，返回的也可以是一个函数了，然后可以通过store.dispatch()把这个函数发送给store了，之所以可以把这个返回值是函数的action发送出去就是因为使用了redux-thunk。你这里dispatch的是一个函数，实际上store.dispatch接收的只能是一个对象,redux-thunk改变了这个只能接收函数的方式。