redux中间件

前言

提到中间件，你可能会想到Express和Koa等服务端框架，没想到也没关系，这句话是我装逼用的。

那么redux中的中间件到底干嘛用的？

有这样一个问题？我们之前用的Redux都是在Action发出之后立即执行Reducer,计算出state,这是同步操作。如果想异步操作呢？即过一段时间再执行Reducer怎么办？这里就需要用到中间件middleware。

先放一张图看看：

一、中间件的概念

redux是有流程的，那么，我们该把这个异步操作放在哪个环节比较合适呢？

Reducer?纯函数只承担计算State功能，不适合其它功能。

View?与State一一对应，可以看做是State的视觉层，也不适合承担其它功能。

Action？它是一个对象，即存储动作的载体，只能被操作。

其实，也只有dispatch能胜任此重任了。那么怎么在dispatch中添加其它操作呢？

示例中可以看出，我们对store.dispatch重新进行了定义，在发送action的前后，做了打印。

这是中间件的大致雏形，真实的中间件要比这么复杂多了

二、中间件的用法

我们在这里先看看中间件是怎么使用，下面我们一步步剖析每个细节。

代码中有两点需要注意：

1、createStore方法可以整个应用的初始状态作为参数 内部是这么处理的

let state = inital_state;

2、中间件的参数次序有讲究。下面我会把这个问题讲明白。

三、applyMiddleware

Middleware可以让你包装store的dispatch方法来达到你想要的目的。同时，middleWare还拥有“可组合”这一关键特性。多个middleWare可以被组合到一起使用，形成middleWare链，依次执行。其中每个middleware不需要关心链前后的的middleWare的任何信息。

上面代码中，所有中间件都被放进了一个数组chain,然后嵌套执行，最后执行store.dispatch。中间件内部middlewaAPI可以拿到getState和dispatch这两个方法。

...middleware：遵循Redux middleware API的函数。每个middleware接受Store的dispatch和getState函数作为命名参数，并返回一个函数。该函数会被传入成为next的下一个middleWare 的dispatch方法，并返回一个接收action的新函数，这个函数可以直接调用next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。

所以，接下来，我们就能看到middleware的函数签名是({ getState, dispatch }) => next => action

其实，它的本质就是包装sotre中的dispatch。

上面代码中，还用到了compose方法，我们来看看compose是怎么是实现的？

compose

先看下面一个栗子：

这中写法调用起来，一层套一层，是不是看着很不爽，我们简化一下：

看看这个代码是不是用起来，很干练一些。其实还可以简化

至于为什么applyMiddleWare的参数有顺序，这里给出了答案。

四、Applymiddleware的三个常用参数

1、日志记录

使用 Redux 的一个益处就是它让 state 的变化过程变的可预知和透明。每当一个 action 发起完成后，新的 state 就会被计算并保存下来。State 不能被自身修改，只能由特定的 action 引起变化。

试想一下，当我们的应用中每一个 action 被发起以及每次新的 state 被计算完成时都将它们记录下来，岂不是很好？当程序出现问题时，我们可以通过查阅日志找出是哪个 action 导致了 state 不正确。

需要上述资料的加QQ群 514683544  免费领取哟~