React-Redux 源码解析 二（middleware）

前言

上一章节 我们已经解析了Redux 的createStore 的基本使用方法。其中有涉及到第三个参数enhancer， 其对应的就是中间件的概率，我们这一章节我对其进行简单的分析.

Demo

下面代码是一个我们使用了中间件的一个简单的demo 我可以根据下面的步骤执行脚本，可以运行demo 查看效果:

1 git clone [email protected]:bluebrid/redux-learning.git

2 git fetch

3 git checkout middleware

4 npm i

5 npm start

下面是创建一个有中间件的Store 的demo:

import { createStore, applyMiddleware, compose } from '../redux'
import thunk from '../reduxThunk'
import { createLogger } from 'redux-logger'
import api from '../middleware/api'
import rootReducer from '../reducers'
import DevTools from '../containers/DevTools'

const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(thunk, api, createLogger()),
      DevTools.instrument()
    )
  )
  if (module.hot) {
    module.hot.accept('../reducers', () => {
      store.replaceReducer(rootReducer)
    })
  }

  return store
}

export default configureStore
复制代码

下面我们会针对这个代码，进行一步步深入的分析。

compose

从第一章节，我们已经知道第三个参数是一个enhancer ,其实也就是一个中间件的概念，但是为我们从上面的脚本看到，第三个参数居然是执行了一个compose 的方法， 我接下来就分析下这个compose 方法，代码:

export default 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)))
}
复制代码

如果传入的中间件的个数为：0，返回一个空函数，则相当于什么也不操作， 如果传入的参数长度为： 1， 则直接返回这个函数， 下面才是重点，return funcs.reduce((a, b) => (...args) => a(b(...args)))

TODO.....