javascript - Redux 中间件，谢谢？

Question

我直接从 Redux 文档中获取了这一点:

const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

现在，我知道如何使用 Promise，但是 thunks...我有点迷失了。

为什么他们要执行以下操作:store => next => action =>？

Answer 1

在 redux 文档中关于 middleware ，可以看到ES6箭头函数链:

logger = store => next => action =>

翻译成 ES5 后看起来像这样:

function logger(store) { // this is not the store, just an object with getState and dispatch
  return function wrapDispatchToAddLogging(next) {
    return function dispatchAndLog(action) {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result
    }
  }
}

为什么我们需要一个返回函数的函数:

这称为部分应用，您可以在 article 中阅读更多相关信息。 。

基本思想是，如果你需要为一个函数提供 3 个参数，但现在只有 1 个，稍后 1 个，第三个将在遥远的将来，你可以按顺序应用参数每当它们可用时，而不是立即。每次应用参数时，您都会得到一个新函数，该函数在其上下文中“存储”了参数。

在 Redux 中

中间件需要部分应用，因为 middleware's chain 的创建需要几个步骤。 :

注意:这是传递给第一个参数的实际“商店”:

const middlewareAPI = {
  getState: store.getState,
  dispatch: (action) => dispatch(action)
}

1. 迭代中间件的数组，调用每个函数并向每个函数提供 middlewareAPI(store => 参数):

   chain = middlewares.map(middleware => middleware(middlewareAPI))

2. 组成中间件数组:

   dispatch = compose(...chain)(store.dispatch)

3. 在 compose将每个中间件作为 next => 参数传递给它之前的中间件，并将 dispatch 传递给最后一个:

   返回 funcs.reduce((a, b) => (...args) => a(b(...args)))

4. 现在，中间件是一个只有一个参数 action => 的简单函数，每当一个操作穿过中间件链时，action => 函数每个中间件的每个中间件都会通过当前操作调用。