熟悉redux的朋友肯定知道,redux有 中间件 这个概念,正因为支持中间件,所以大大提高了redux的能力边界,使我们能更容易地实现想要的功能
本篇文章就准备聊聊redux里的中间件,废话不多说,开搞!
何为中间件
其实中间件的概念在很多地方都存在,比如webpack、koa2,那么它到底是什么呢?
就我看来,中间件就是用于处理 输入资源 的 中间节点,它位于 输入源头 与 输出结尾 之间,每经过一个中间件,输入资源就会被处理一次,而被输出的处理过后的资源会继续流入下一个中间件,依次类推,形成一个流水线,最终输出类库所需要的格式的资源
Redux without 中间件
我们知道,在Redux没有使用中间件时,一次更新的流程如下
- 页面 dispatch 一个 action,表明想要更改state的意图
- action被dispatch到 reducer 里
- reducer里根据action的 type 和 payload 决定如何更新state
- 使用action的 payload 与 当前state 生成一个新的state并返回
- 所有使用了 connect 的view进行页面更新
需要注意的是,reducer接受的action必须是一个 普通对象,并且必须有一个 type 字段表明action的类型
Redux with 中间件
redux里的中间件所作用的环节,就是上述第一步与第二步之间
redux中间件可以劫持view发出的action,从而做一系列的处理,但必须保证的是最后一个中间件dispatch出来的必须是普通对象,因为最后一个中间件的后面就是reducer了
因为中间件会劫持action,所以我们在view里dispatch的action不一定是普通对象,而可以是任意类型,比如redux-thunk中间件就允许我们dispatch一个函数
在中间件里,我们可以做任何事情,比如redux-logger可以记录日志,限制我们的只有想象力
Redux里常见的中间件
下面罗列redux里常用的中间件
- redux-logger:用于记录日志
- redux-thunk:用于dispatch一个function
- redux-saga:用于处理异步逻辑
结语
中间件对于redux来说是十分重要的,它可以使我们更灵活地使用redux,也是让redux更具吸引力的原因之一,因此我们一定要掌握它,好啦,就到这啦,over!