上一篇文章介绍了Redux的数据中心,并分别讲解了数据中心为开发者提供的各种接口,了解到要触发状态的更新就需要调用dispatch
方法来分发action
。然而store
提供的dispatch
方法只能够用来分发特定格式的action
。
如果我们想要更强大的功能怎么办?如果我们想要打印状态变化前后的日志?或者说想自定义某类方法来作为dispatch
的参数?我们当然可以重写原来的dispatch
方法,然而这并不优雅,维护成本相对较高。这篇文章想详细讲解一下,在函数式编程的背景下如何以中间件的方式优雅地扩展我们的dispatch
方法。
1. 中间件
中间件这个概念存在于许多流行的Web框架中,可以把它想象成是请求/响应分发的中间层,用于对请求/响应做进一步的处理,而无需改变原有的代码逻辑。在node.js
社区的KOA轻量级框架很出色地体现了这一点(当然它肯定不是第一个这样干的人)。koa本身只提供了最基础的请求/响应功能,如果想要更强大的功能(比如说日志,时间记录等功能)则需要自己添加相应的中间件。
Redux继承了这一理念,它把中间件应用到了dispatch
方法的扩展中,让我们可以优雅地扩展dispatch
方法,而不需要重写原有的dispatch
方法,接下来我们好好体会一下它的精妙之处。
2. 中间件在Redux中的应用
在分析源码之前先来看看在Redux里面如何使用中间件,最关键的是applyMiddleware
这个方法
import { createStore, applyMiddleware } from 'redux'
// Add thunk
import thunk from 'redux-thunk'
import logger from 'redux-logger'
const reducer = (state) => state
let newCreateStore = applyMiddleware(
logger,
thunk
)(createStore)
// 创建store,数据中心
let store = newCreateStore(reducer)
其中thunk
跟logger
就是我们提到的中间件,依次把它们传入applyMiddleware
函数中,就会返回一个新的函数,然后再用这个函数处理原始的createStore
方法就会返回一个增强过的createStore
方法。
另外,还记得createStore
函数可以接收enhancer
这个参数不?其实applyMiddleware
这个方法经过调用后所得到的就是一个增强器。为此我们还可以这样调用createStore
,并生成store
。