熟悉redux的朋友肯定知道,redux有 中间件 这个概念,正因为支持中间件,所以大大提高了redux的能力边界,使我们能更容易地实现想要的功能

本篇文章就准备聊聊redux里的中间件,废话不多说,开搞!

ppx2.jpg

何为中间件

其实中间件的概念在很多地方都存在,比如webpack、koa2,那么它到底是什么呢?

dog.jpg

就我看来,中间件就是用于处理 输入资源中间节点,它位于 输入源头输出结尾 之间,每经过一个中间件,输入资源就会被处理一次,而被输出的处理过后的资源会继续流入下一个中间件,依次类推,形成一个流水线,最终输出类库所需要的格式的资源

666.jpg

Redux without 中间件

我们知道,在Redux没有使用中间件时,一次更新的流程如下

  1. 页面 dispatch 一个 action,表明想要更改state的意图
  2. action被dispatch到 reducer
  3. reducer里根据action的 typepayload 决定如何更新state
  4. 使用action的 payload当前state 生成一个新的state并返回
  5. 所有使用了 connect 的view进行页面更新

需要注意的是,reducer接受的action必须是一个 普通对象,并且必须有一个 type 字段表明action的类型

Redux with 中间件

redux里的中间件所作用的环节,就是上述第一步与第二步之间

redux中间件可以劫持view发出的action,从而做一系列的处理,但必须保证的是最后一个中间件dispatch出来的必须是普通对象,因为最后一个中间件的后面就是reducer了

因为中间件会劫持action,所以我们在view里dispatch的action不一定是普通对象,而可以是任意类型,比如redux-thunk中间件就允许我们dispatch一个函数

在中间件里,我们可以做任何事情,比如redux-logger可以记录日志,限制我们的只有想象力

pengzhang.jpg

Redux里常见的中间件

下面罗列redux里常用的中间件

结语

中间件对于redux来说是十分重要的,它可以使我们更灵活地使用redux,也是让redux更具吸引力的原因之一,因此我们一定要掌握它,好啦,就到这啦,over!