您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　7.2.1 redux-thunk中间件

　　使用Redux访问服务器，同样要解决的是异步问题。

　　Redux的单向数据流是同步操作，驱动Redux流程的是action对象，每一个action对象被派发到Store上之后，同步地被分配给所有的reducer函数，每个reducer都是纯函数，纯函数不产生任何副作用，自然是完成数据操作之后立刻同步返回，reducer返回的结果又被同步地拿去更新Store上的状态数据，更新状态数据的操作会立刻被同步给监听Store状态改变的函数，从而引发作为视图的React组件更新过程。

　　这个过程从头到尾，Redux马不停蹄地一路同步执行，根本没有执行异步操作的机会，那应该在哪里插入访问服务器的异步操作呢？

　　Redux创立之初就意识到了这种问题，所以提供了thunk这种解决方法，但是thunk并没有作为Redux的一部分一起发布，而是存在一个独立的redux-thunk发布包中，我们需要安装对应的npm包：

　　npm install --save redux-thunk

　　实际上，redux-thunk的实现极其简单，只有几行代码，将它作为一个独立的npm发布而不是放在Redux框架中，更多的只是为了保持Redux框架的中立性，因为redux-thunk只是Redux中异步操作的解决方法之一，还有很多其他的方法，具体使用哪种方法开发人员可以自行决定，在后面章节会介绍Redux其他支持异步操作的方法。

　　读者可能想问thunk这个命名是什么含义，thunk是一个计算机编程的术语，表示辅助调用另一个子程序的子程序，听起来有点绕，不过看看下面的例子就会体会到其中的含义。

　　假如有一个JavaScript函数f如下定义：

　　const f = (x) => {

　　return x() + 5;

　　}

　　f把输入参数x当做一个子程序来执行，结果加上5就是f的执行结果，那么我们试着调用一次f：

　　const g = () => {

　　return 3 + 4;

　　}

　　f(g); //结果是 (3+4)*5 = 37

　　上面代码中函数g就是一个thunk，这样使用看起来有点奇怪，但有个好处就是g的执行只有在f实际执行时才执行，可以起到延迟执行的作用，我们继续看redux-thunk的用法来理解其意义。

　　按照redux-thunk的想法，在Redux的单向数据流中，在action对象被reducer函数处理之前，是插入异步功能的时机。

　　在Redux架构下，一个action对象在通过store.dispatch派发，在调用reducer函数之前，会先经过一个中间件的环节，这就是产生异步操作的机会，实际上redux-thunk提供的就是一个Redux中间件，我们需要在创建Store时用上这个中间件。如图7-2所示。

　　图7-2 Redux的action处理流程

　　在第4章，我们已经接触过了中间件，redux-immutable-state-invariant这个中间件帮助开发者发现reducer里不应该出现的错误，现在我们要再加一个redux-thunk中间件来支持异步action对象。

　　我们创建的Store.js文件基本和Todo应用中基本一致，区别就是引入了redux-thunk，代码如下：

　　import thunkMiddleware from 'redux-thunk';

　　const middlewares = [thunkMiddleware];

　　之前我们用一个名为middlewares的数组来存储所有中间件，现在只要往这个数组里加一个元素就可以了，之后，如果需要用到更多的中间件，只需要导入中间件放在middlewares数组中就可以。 深入浅出React和Redux