初学redux中间件

1,100 阅读5分钟
原文链接: whutzkj.space

上篇文章讲了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,标准的洋葱模型。

好吧,大概讲完了,有错希望大家及时指出,共同学习😝