【学习笔记】在redux中使用axios，通过redux-thunk处理action

异步修改的情况下，我们需要先获取到网络请求的数据，然后通过调用dispatch派发action修改，如果我们需要将网络请求封装在action中应该如何处理？

无论是dispatch还是action也好，都是同步代码，且action只能返回一个对象，所以我们如果在action中封装网络请求会出现无法获取到值的情况，如图：

按图片上面执行的代码，getBannerList 这个action的返回值是undefined

我们如果加上async/await呢？

看起来似乎没有问题，但是这里本质其实是返回 一个 promise 对象，所以报错如下:

我们注意到，报错信息中提示我们如果想处理函数可以使用redux-thunk这个库，那么这个redux-thunk库到底是什么东西呢？又该如何使用呢？

redux-thunk

redux-thunk库其实是一个redux的中间件，底部源码做的事情非常简单，就是当你acton返回的是一个函数的时候帮你执行这个函数，并将dispatch传递给这个函数。

那么如何使用呢？

快速入门

在你创建redux的store的时候可以配置中间件

import { createStore, applyMiddleware } from "redux"
//导入thunk
import thunk from 'redux-thunk'

import reducer from "./reducer"
//createStore第二个参数为添加中间件
const store = createStore(reducer, applyMiddleware(thunk))

export default store

这样我们就配置好了thunk中间件，再回头看看我们的action应该如何修改吧

我们的getBannerListAction现在返回的一个函数，thunk会帮我们执行此次函数并且将dispatch传递给函数，除此之外还好给我们一个getState函数，原来获取state的数据。