Redux02 异步操作和中间件

已同步到个人博客，欢迎访问。

同步和异步流程

先来复习一下Redux的基本流程：

1. 用户发出Action

2. Store自动调用Reducer，计算返回一个新的State

3. Store就会调用监听函数

4. 监听函数listener中重新渲染View

在第1、2步之间有一个问题，之前考虑的情况都是在Action发出之后，Reducer立刻计算出State，这是一个同步的过程。如果在Action发出之后，过一段时间再执行Reducer，这是异步过程：

1. 用户发出Action

1.5 异步操作（等待一段时间）

2. Store自动调用Reducer，计算返回一个新的State

3. Store就会调用监听函数

4. 监听函数listener中重新渲染View

现在我们希望的是在异步操作结束后，自动执行Reducer，这就要用到中间件（middleware）

中间件的概念

什么是中间件？中间件（middleware）是一种很常见、也很强大的模式，被广泛应用在Express、Koa、Redux等类库和框架当中。

简单来说，中间件就是在调用目标函数之前，可以随意插入其他函数预先对数据进行处理、过滤，在这个过程里面你可以打印数据、或者停止往下执行中间件等。数据就像水流一样经过中间件的层层的处理、过滤，最终到达目标函数。

// 中间件可以把 A 发送数据到 B 的形式从
// A -----> B
// 变成:
// A ---> middleware 1 ---> middleware 2 ---> middleware 3 --> ... ---> B

具体到Redux来看，如果要实现中间件，最合适环节就是在发送Action的环节，即使用中间件包裹store.dispatch来添加功能，比如要增加打印功能，将Action和State打印出来，我们就可以编写这样一个中间件：

const next = store.dispatch;

store.dispatch = function (action) {
  console.log('action: ', action);
  next(action);
  console.log('next state: ', store.getState())
};

中间件对store.dispatch进行了改造，在发出Action和执行Reducer之间添加了其他功能。但是实际上中间件的写法不是这样的。

在Redux中，中间件是纯函数，有明确的使用方法，并且要严格的遵循以下格式：

var anyMiddleware = function ({ dispatch, getState }) {
  return function(next) {
    return function (action) {
      // 你的中间件业务相关代码
    }
  }
}

中间件由三个嵌套的函数构成（会依次调用）：

（1）第一层向其余两层提供分发函数dispatch和getState函数

（2）第二层提供next函数，它允许你显示的将处理过的输入传递给下一个中间件或Redux（这样Redux才能调用所有reducer）。实际上next作为参数，就是通过componse传入的下一个要执行的函数，通过next(action)就将action传递给了下一中间件

（3）第三层提供从上一个中间件或者从dispatch传递过来的Action，这个Action可以调用下一个中间件（让Action继续流动）或者以想要的方式处理action

所以一个Log的中间件应该这样写：

function logMiddleware ({ dispatch, getState }) {
  return function(next) {
    return function (action) {
      console.log('logMiddleware action received:', action)
      return next(action)
    }
  }
}

next(action)就是继续传递Action，如果不进行这一步，所有的Action都会被丢弃。

中间件的用法

常用的中间件都有现成的，不用我们自行编写，只需要直接引用别人写好的模块即可，比如上面的打印日志的中间件，就可以使用现成的