带有额外参数的 redux thunk 是如何工作的？

Question

这是 redux-thunk 库的源代码：

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

我不明白 "thunk" 和 "thunk.withExtraArguent" 有何不同。

const thunk=createThunkMiddleware() // 这是我们用于异步请求的中间件

然而 thunk.withExtraArgument 是相同的 createThunkMiddleware 函数，但这次它只是作为参考传递。我们可以在这里传递参数，但不能将参数传递给 thunk。

有人可以解释一下区别吗？对我来说 thunk 和 thunk.withExtraArgument 是一样的

Answer 1

在我的通用 javascript 应用程序中，我在客户端和服务器上创建了 axios 实例和 redux 存储。我将客户端 axios 实例传递给客户端存储，将服务器端 axios 实例传递给服务器端存储。

由于 reducer 应该是“纯”的（它们不会改变其范围之外的任何东西）我们不能从 reducer 内部进行任何 API 调用或分派操作。如果你想要一个动作来做某事，该代码需要存在于一个函数中。通常我们的动作只是普通对象，我们只是将它们直接发送给 reducer。 Redux-thunk 是一个中间件，它查看通过系统的每个动作，如果它是一个函数，它就会调用该函数。 Redux 会将两个参数传递给 thunk 函数：dispatch，以便它们可以在需要时派发新操作；和 getState，这样他们就可以访问当前状态。 REdux-thunk 中间件使我们能够让动作创建者 return 一个函数而不是一个动作对象。但是 extraArgument 没有用 thunk 函数定义。

  const thunk = createThunkMiddleware()

当我创建每个 redux 存储副本时，我还创建了一个自定义的 axios 实例，并将该自定义实例作为额外的第三个参数传递给 redux thunk。然后在我们的动作创建者中，每当我发出某种类型的网络请求时，我都会收到 axios 的自定义副本，而不是实际的模块本身。然后我可以发出请求而不必真正担心我们是在客户端还是在服务器上。 thunk.withExtraArgument 是定义了额外参数的中间件。所以我使用 thunk.withExtraArgument 并传递 axios 实例。

旁注：

thunk 是函数的奇特名称，用于延迟计算直到需要结果

Answer 2

您可以添加一个额外的 redux-thunk 参数作为函数引用，并在您的异步操作中调用它。您可以在 Medium

上的这个故事中阅读更多关于 how to use Axios as an ExtraParameter 的信息

带有额外参数的 redux thunk 是如何工作的？

How is redux thunk with extra argument working?

reactjs

redux

redux-thunk

server-side-rendering

axios

旁注：