`store => {...}`

Question

  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk, api, wsMiddleware, createLogger()),
      typeof window === 'object' && typeof window.devToolsExtension !== 
'undefined'
        ? window.devToolsExtension()
        : DevTools.instrument(),
    ),
  );

以上是您通常如何创建商店，然后您的中间件就像这样开始：

export default store => next => (action) => {

我确实从redux.org读了中间件部分，但是有人能够更好地向我解释那里发生了什么？

中间件正在接收商店吗？并从商店调出下一个函数，最后使用作为操作给出的参数（在本例中）。？

Answer 1

Redux中间件管道可以像这样细分......

`store => {...}`

商店API是给予管道的第一个参数。这允许中间件在管道中的任何点获取当前状态和/或将新操作分派到商店中。

注意：它具有许多与createStore函数返回的商店相同的特性，但它们并不相同。只有dispatch和getState功能可用。

`next => {...}`

next参数是对链中下一个中间件的引用。如果没有更多的中间件可以去，商店会处理动作（即将其传递给减速器）。

如果未调用next，则操作将不会进入reducer。这可以用于抑制对其自身没有有效操作的内容，例如函数或promise，因为如果Redux尝试处理它，则会引发错误。

`action => {...}`

action参数是分配到商店的东西。

{...}

在这里，您将测试action以查看是否存在您想要使用的特殊内容以及是否将其传递到next处理程序。

一个例子

对于此示例，我们将创建一个简化的thunk middleware，解释它如何使用管道的每个部分。

export default store => next => action => {

  // if the action is a function, treat it as a thunk
  if (typeof action === 'function') {

    // give the store's dispatch and getState function to the thunk
    // we want any actions dispatched by the thunk to go through the
    // whole pipeline, so we use the store API dispatch instead of next
    return action(store.dispatch, store.getState)
  } else {

    // we're not handling it, so let the next handler have a go
    return next(action)
  }
}

Answer 2

符合Redux中间件API的函数。每个中间件都接收Store的dispatch和getState函数作为命名参数，并返回一个函数。该函数将被赋予下一个中间件的调度方法，并且期望返回具有可能不同的参数的调用next（action）的动作的函数，或者在不同的时间，或者可能根本不调用它。链中的最后一个中间件将接收真实存储的调度方法作为下一个参数，从而结束链。因此，中间件签名是（{getState，dispatch}）=＆gt; next =＆gt;动作。

在applymiddleware文档中找到了答案。 https://redux.js.org/docs/api/applyMiddleware.html

Redux中间件了解指导

2 个答案:

`store => {...}`

`next => {...}`

`action => {...}`

{...}

一个例子