Redux学习笔记--异步Action和Middleware

异步Action

之前介绍的都是同步操作，Redux通过分发action处理state，所有的数据流都是同步的，如果需要一步的话怎么办？

最简单的方式就是使用同步的方式来异步，将原来同步时一个action拆分成多个异步的action的，在异步开始前、异步请求中、异步正常返回（异常）操作分别使用同步的操作，从而模拟出一个异步操作了。

当然，这样的方式是比较麻烦的，现在已经有redux-saga等插件来解决这些问题了。。

Middleware

Middleware提供的是位于 action 被发起之后，到达 reducer 之前的扩展点。在每次分发action时，所有的Middleware都会执行。

Middleware类似spring中的面向切面编程的思想。本质上是注册一系列的操作，在分发action之前链式执行操作。

理解Middleware

尝试来解读一下middleware的实现原理。以记录日志为例，我们来一步步分析Middleware的操作。

1. 首先我们能想到的就是在dispatch action的代码前后加上log的代码，但是这样的话需要在所有的dispatach语句前后加代码，太麻烦。
2. 那么我们是不是可以封装dispatch方法，将log的代码加到封装的方法里面去。但是这种情况下需要针对每个action都封装不同的方法来完成。
3. 我们也可以直接替换dispatch方法，用我们自己封装的方法来代替dispatch。这样可以解决问题，但是新的问题又出来了，假如我们在dispatch前出了log还需要做其他操作怎么办？继续去丰富我们替换的方法？好像不太合适。。。
4. 把dispatch方法看成参数

在上面的步骤三中，我们把原生dispat方法替换了，从而没法添加多个处理操作。那么我们是否可以把dispatch函数当成是参数，在每个处理操作函数中，除了正常的操作流程外，可以使用dispatch参数，最终仍然将此参数返回。

function logger(store) {
  return function wrapDispatchToAddLogging(next) {
    return function dispatchAndLog(action) {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result
    }
  }
}

　　es6写法

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

const crashReporter = store => next => action => {
  try {
    return next(action)
  } catch (err) {
    console.error('Caught an exception!', err)
    Raven.captureException(err, {
      extra: {
        action,
        state: store.getState()
      }
    })
    throw err
  }
}
function applyMiddleware(store, middlewares) {
  middlewares = middlewares.slice()
  middlewares.reverse()

  let dispatch = store.dispatch
  middlewares.forEach(middleware =>
    dispatch = middleware(store)(dispatch)
  )

  return Object.assign({}, store, { dispatch })
}