异步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 })
}