浅析Redux 的 store enhancer

相信大家都知道Redux的middleware（中间件）的概念，Redux通过middleware可以完成发送异步action（网络请求）、打印action的日志等功能。相对而言，Redux的store enhancer的概念，很多人并不是很清楚。

1. 基本概念及使用

Redux通过API createStore创建store，createStore的函数签名如下：

createStore(reducer, [preloadedState], [enhancer])

其中，第3个可选参数enhancer，就是指的store enhancer。

store enhancer，可以翻译成store的增强器，顾名思义，就是增强store的功能。一个store enhancer，实际上就是一个高阶函数，它的参数是创建store的函数（store creator），返回值是一个可以创建功能更加强大的store的函数(enhanced store creator)，这和React中的高阶组件的概念很相似。

store enhancer 函数的结构一般如下：

function enhancerCreator() {
  return createStore => (...args) => {
    // do something based old store
    // return a new enhanced store
  }
}

注意，enhancerCreator是用于创建store enhancer 的函数，也就是说enhancerCreator的执行结果才是一个store enhancer。（…args） 参数代表创建store所需的参数，也就是createStore接收的参数，实际上就是（reducer, [preloadedState], [enhancer]）。

现在，我们来创建一个store enhancer，用于输出发送的action的信息和state的变化：

// autoLogger.js
// store enhancer
export default function autoLogger() {
  return createStore