上篇文章讲了Redux的基础概念,这里就讲讲Redux的高级东西,其实就是加了一个异步。Redux不像Vuex是直接服务于Vue这个框架,所以Vuex里面封装的很好,mutation,action啥都有了(Vuex的mutation是redux的同步action,Vuex的action是redux的异步action)。但是Redux其实是一个独立的不受框架限制的库,所以设计的时候可扩展性更加高一点。所以Redux的异步action需要第三方库就是所谓的中间件来完成,所以想理解异步action,我们就先了解一下Redux中间件的原理。
什么是中间件
最早接触中间件这个概念是从express,然后是koa,其实中间件就是插件模式。拦截原先的代码执行过程,reudx中的中间件就是让原来action ==> reducer变成action ==> middleware ==> reducer。这也就是使同步action变异步action的最终奥义。
如何使用中间件
这里还是以logger为例子,由于这篇文章主要剖析Redux执行中间件的过程,如有小伙伴想知道中间件怎么写的请异步官网如何一步步写一个redux中间件,这里简单点直接一笔带过。
|
|
applyMiddleware
下面就是敲黑板时间,啪啪啪。先看下applyMiddleware的源码:
1、applyMiddleware()执行完成后返回了一个闭包函数,目的是将创建 store的步骤放在这个闭包内执行,这样 middleware 就可以共享 store 对象。我看到这里有个疑惑,不是说只有一个唯一store的么,我们上面开始初始化的时候let store = createStore()就创建了一个store了,难道自己打自己脸了?这里我们先留个疑问在这里,下面来讲。
2、map middlewares后得到新的数组chain
3、通过compose后得到改造后的dispatch方法
4、最后返回新的store
这里来解决一下上面的疑惑,我们就看一下createStore的源码,我们主要看一下下面这段代码
如果我们传入enhancer这个增强器函数,整个createStore就会返回,直接进入enhancer函数的逻辑。所以在初始化得到的store并不是初始化createStore里面的返回的原始store,而是在那个闭包函数里面调用的createStore创建的store(只不过这个store里面的dispatch的方法是经过改造后的)。
下面贴一下两个createStore实际调用的参数
|
|
第二步里面的map方法第一次调用了中间件,所以chain数组里面的每一项应该是下面这样的
第三步里面又有一个重点方法compose。
WTF,这么简单么,但是我真的看了很久,实在是愚钝….只好一步一步写下来。下面就全部以代码形式写了
好吧,大概讲完了,有错希望大家及时指出,共同学习😝