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功能的全部原因是，您不必明确调用您尝试应用的任何中间件。

来自文档

为什么我们甚至覆盖派遣？当然，能够称之为之后，还有另一个原因：每个中间件都可以访问（并调用）先前包装的store.dispatch

Answer 2

这是封闭的魔力。

原始调度功能存储在下一个变量

中

redux文档中的这个例子如何工作？

2 个答案: