上篇文章讲了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中间件,这里简单点直接一笔带过。
// 中间件的基本原理写法
function logger(store){
return function(next){
return function(action){
console.log('preState', store.getState())
next(action)
console.log('nextState', store.getState())
}
}
}
// Redux中使用中间件
import { applyMiddleware, createStore, combineReducers } from 'redux'
let rootReducer = combineReducers({
todoApp,
visibility_filter
})
let initialState = {}
let store = createStore({
rootReducer,
initialState,
// 这里来使用中间件,applyMiddleware是redux提供的唯一一个store增强器的api
applyMiddleware(logger, some_other_middleware)
})
applyMiddleware
下面就是敲黑板时间,啪啪啪。先看下applyMiddleware的源码:
function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
1、applyMiddleware()执行完成后返回了一个闭包函数,目的是将创建 store的步骤放在这个闭包内执行,这样 middleware 就可以共享 store 对象。我看到这里有个疑惑,不是说只有一个唯一store的么,我们上面开始初始化的时候let store = createStore()就创建了一个store了,难道自己打自己脸了?这里我们先留个疑问在这里,下面来讲。
2、map middlewares后得到新的数组chain
3、通过compose后得到改造后的dispatch方法
4、最后返回新的store
这里来解决一下上面的疑惑,我们就看一下createStore的源码,我们主要看一下下面这段代码
function createStore(reducer, preloadedState, enhancer) {
....
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}
...
}
如果我们传入enhancer这个增强器函数,整个createStore就会返回,直接进入enhancer函数的逻辑。所以在初始化得到的store并不是初始化createStore里面的返回的原始store,而是在那个闭包函数里面调用的createStore创建的store(只不过这个store里面的dispatch的方法是经过改造后的)。
下面贴一下两个createStore实际调用的参数
// 初始化的时候createStore有三个参数
createStore(reducer, initialState, enhancer)
// 闭包函数里面createStore实际只有两个参数,少了一个增强器函数,官方里面用...args这个方式表示了
function applyMiddleware(...middlewares) {
return createStore => (reducer, initialState) => {
// 注意下面这里createStore,这里得到的store就是初始化里面拿到的store,还是唯一一个
const store = createStore(reducer, initialState)
....
}
}
第二步里面的map方法第一次调用了中间件,所以chain数组里面的每一项应该是下面这样的
function(next){
return function(action){
next(action)
}
}
第三步里面又有一个重点方法compose。
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
WTF,这么简单么,但是我真的看了很久,实在是愚钝....只好一步一步写下来。下面就全部以代码形式写了
// 我们知道经过第二步后,chain数组里面的函数形式了,那我们这里就模拟三个,相当于chain=[A, B, C]
function A(next) {
return function dispatchA(action) {
let result = next(action)
return result
}
}
function B(next) {
return function dispatchB(action) {
let result = next(action)
return result
}
}
function C(next) {
return function dispatchC(action) {
let result = next(action)
return result
}
}
// 这里我们执行chain.reduce((a, b) => (...args) => a(b(...args))),箭头函数写的方便,读起来真的不习惯,改造一下
let result = [A,B,C].reduce(function(initial, current){
return function(...args) {
return initial(current(...args))
}
})
// 清晰一点了。这里调用reduce没有初始化值,所以数组第一个当做默认值,所以最后result也就是经过compose后得到的结果是下面这样的,
result = function(...args){
return A(B(C(...args)))
}
// 接下来继续往下
dispatch = compose(...chain)(store.dispatch) 就变成了dispatch = result(store.dispatch) = A(B(C(store.dispatch)))
// A(B(C(store.dispatch)))这个函数怎么执行,真的惨...先分析,一层一层往里去执行
// A(next) next指向函数B,那就找B,找到了执行B(next),
// 额,next又指向函数C,继续找,找到了执行C(next),
// 这次next指向的是store.dispatch,那就执行,返回了函数dispatchC
// 好的,终于返回值了,那么B(next)中next指向dispatchC,执行返回了dispatchB
// 继续,A(next)中的next就是指向dispatchB,执行并返回得到dispatchA
// 所以,最后newDispatch = dispatchA
// 我们真正调用dispatch(action)的时候就是调用newDispatch(action)
// 第一步
function dispatchA(action){
let result = next(action) // next闭包指向dispatchB
return result
}
// 第二步
function dispatchB(action){
let result = next(action) // next闭包指向dispatchC
return result
}
// 第三步
function dispatchC(action){
let result = next(action)// next闭包指向原始的store.dispatch,store.dispatch 会执行 reducer 生成最新的 store 数据
return result
}
// 第四步,执行dispatchC中next后的代码
// 第五步,执行dispatchB中next后的代码
// 第六步,执行dispatchA中next后的代码
嗯,所以整个执行 action 的过程为 A -> B -> C -> dispatch -> C -> B -> A,标准的洋葱模型。
好吧,大概讲完了,有错希望大家及时指出,共同学习