redux文檔中的這個示例如何工作？

Question

我正在閱讀Redux文檔，它列出了應用中間件的不同方法，這些方法可以工作，但是在了解Redux如何實際應用中間件之前效率不高。

我不知道為什么以下這種方法為什么行得通，即使我知道為什么它效率不高：

 function applyMiddlewareByMonkeypatching(store, middlewares) { middlewares = middlewares.slice() middlewares.reverse() // Transform dispatch function with each middleware. middlewares.forEach(middleware => store.dispatch = middleware(store) ) } // We could use it to apply multiple middleware like this: applyMiddlewareByMonkeypatching(store, [logger, crashReporter]) 

那怎么可能工作呢？ 您難道不只是要在forEach循環的每次迭代中覆蓋store.dispatch（）函數，最后您要使用的只是數組中的最后一個中間件？

這是文檔的鏈接： http : //redux.js.org/docs/advanced/Middleware.html

Answer 1

閱讀完文檔后，我相信我會為您解答。

讓我們以記錄器功能為例。 在這里。

function logger(store) {
  let next = store.dispatch

  // Previously:
  // store.dispatch = function dispatchAndLog(action) {

  return function dispatchAndLog(action) {
    console.log('dispatching', action)
    let result = next(action)
    console.log('next state', store.getState())
    return result
  }
}

這是下面對記錄器功能的調用

store.dispatch = logger(store)

因此， store實例將傳遞給logger 。 進入logger函數后， next變量將保留對原始store.dispatch函數的引用。 請注意，它尚未被覆蓋。 現在，您使用此行next(action)調度動作並將其存儲在result並返回result值。

覆蓋store.dispatch函數的全部原因是，您不必顯式調用要嘗試應用的任何中間件。

來自文檔

為什么我們甚至覆蓋調度？ 當然，以后可以調用它了，但是還有另一個原因：每個中間件都可以訪問（並調用）以前包裝的存儲。

Answer 2

這是關閉的魔力。

原始調度功能存儲在下一個變量中