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

Posted 2023-02-22

【中文标题】带有额外参数的 redux thunk 是如何工作的？

【英文标题】：How is redux thunk with extra argument working?

【发布时间】：2020-05-25 07:17:56

【问题描述】：

这是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 是一样的

【问题讨论】：

您似乎已经知道其中的区别......一个是带有未定义额外参数的中间件，另一个是您自己可以调用以创建带有额外参数的此类中间件的函数。什么不清楚？

对不起，我不太确定这里的问题是什么

@DanPantry 对我来说 thunk 和 thunk.withExtraArgument 看起来一样

关于thunk. withExtraArgument的文档

【参考方案1】：

你可以添加一个额外的 redux-thunk 参数作为函数引用，并在你的异步操作中调用它。 你可以阅读更多关于 how to use Axios as an ExtraParameter 在 Medium 上的故事

【参考方案2】：

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

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

  const thunk = createThunkMiddleware()

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