redux中间件原理-讲义

1、redux中间件简介

1.1、什么是redux中间件

redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

通俗来说，redux中间件就是对dispatch的功能做了扩展。

先来看一下传统的redux执行流程：

图1 redux传统执行流程

代码示例：

import { createStore } from 'redux';

/**
 * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

Redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。

对dispatch改造后，效果如下：

图2 dispatch改造后的执行流程

如上图所示，dispatch派发给 redux Store 的 action 对象，到达reducer之前，进行一些额外的操作，会被 Store 上的多个中间件依次处理。例如可以利用中间件来进行日志记录、创建崩溃报告、调用异步接口或者路由等等，那么其实所有的对 action 的处理都可以有中间件组成的。 简单来说，中间件就是对store.dispatch()的增强。

1.2、使用redux中间件

redux有很多中间件，我们这里以 redux-thunk 为例。

代码示例：

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
 const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

直接将thunk中间件引入，放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。即可以在reducer中进行一些异步的操作。

Redux middleware 提供了一个分类处理 action 的机会。在 middleware 中，我们可以检阅每一个流过的 action,并挑选出特定类型的 action 进行相应操作，以此来改变 action。其实applyMiddleware就是Redux的一个原生方法，将所有中间件组成一个数组，依次执行。
中间件多了可以当做参数依次传进去。

代码示例：

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';

const logger = createLogger();

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger) //会按顺序执行
);

2、中间件的运行机制

2.1、createStore源码分析

源码：

// 摘至createStore
export function createStore(reducer, rootState, enhance) {
    //...
    
    if (typeof enhancer !== 'undefined') {
        if (typeof enhancer !== 'function') {
          throw new Error('Expected the enhancer to be a function.')
        }
       /*
        若使用中间件，这里 enhancer 即为 applyMiddleware()
        若有enhance，直接返回一个增强的createStore方法，可以类比成react的高阶函数
       */
       return enhancer(createStore)(reducer, preloadedState)
  }
    
  //...
}

对于createStore的源码我们只需要关注和applyMiddleware有关的地方， 通过源码得知在调用createStore时传入的参数进行一个判断，并对参数做矫正。 据此可以得出createStore有多种使用方法，根据第一段参数判断规则，我们可以得出createStore的两种使用方式：

const store = createStore(reducer, {
   a: 1, b: 2}, applyMiddleware(...));

或：

const store = createStore(reducer, applyMiddleware(...));

经过createStore中的第一个参数判断规则后，对参数进行了校正，得到了新的enhancer得值，如果新的enhancer的值不为undeifined，便将createStore传入enhancer(即applyMiddleware调用后返回的函数)内，让enhancer执行创建store的过程。也就时说这里的：

enhancer(createStore)(reducer, preloadedState