第
redux功能强大的Middleware中间件使用学习
目录引言redux中的Middleware记录日志手动记录redux-sagaGenerator函数实际使用场景
引言
上一节我们学习了redux在实际项目的应用细节，这一节我们来学习redux中一个很重要的概念：中间件。我们会简单实现一个记录的中间件，然后学习redux-saga这个异步请求中间件。
redux中的Middleware
redux中的中间件提供的是位于action被发起之后，到达reducer之前的扩展点。你可以利用Reduxmiddleware来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
记录日志
试想一下，如果我们的redux在每一次dispatch的时候都可以记录下此次发生的action以及dispatch结束后的store。那么在我们的应用出现问题的时候，我们就可以轻松的查阅日志找出是哪个action导致了state不正确。那么我们怎样通过redux实现它呢？
手动记录
最直接的解决方案就是在每次调用store.dispatch(action)前后手动记录被发起的action和新的state。假如你在创建一个action时这样调用：
store.dispatch(addTodo(useRedux))
为了记录这个action以及产生的新的state，你可以通过这种方式记录日志：
letaction=addTodo(UseRedux)
console.log(dispatching,action)
store.dispatch(action)
console.log(nextstate,store.getState())
那么很自然的就能想到可以封装为一个函数在各处调用：
functiondispatchAndLog(store,action){
console.log(dispatching,action)
store.dispatch(action)
console.log(nextstate,store.getState())
dispatchAndLog(store,addTodo(UseRedux))
但是这样我们还是需要每次导入一个外部方法，那么如果我们直接去替换store实例中的dispatch函数呢？
letnext=store.dispatch
store.dispatch=functiondispatchAndLog(action){
console.log(dispatching,action)
letresult=next(action)
console.log(nextstate,store.getState())
returnresult
其实到这里我们想要实现的功能已经完成了，但是距离Middleware实际使用的方法还是有不小的差距，同时我们这里只能对dispatch的扩展时十分有限的，如果我想对其添加其他的功能，又该怎么实现呢？首先可以确定的是我们需要将每一个功能分离开来，我们希望的时一个功能对应一个模块，那么当我们想添加其他的模块时，应该是这样的：
functionpatchStoreToAddLogging(store){
letnext=store.dispatch
store.dispatch=functiondispatchAndLog(action){
console.log(dispatching,action)
letresult=next(action)
console.log(nextstate,store.getState())
returnresult
//崩溃报告模块
functionpatchStoreToAddCrashReporting(store){
letnext=store.dispatch
store.dispatch=functiondispatchAndReportErrors(action){
try{
returnnext(action)
}catch(err){
console.error(捕获一个异常!,err)
Raven.captureException(err,{
extra:{
action,
state:store.getState()