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

异步Action

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

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

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

Middleware

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

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

理解Middleware

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

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

}

巴特西

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

最新文章

热门文章