这个 redux thunk 的例子是如何工作的？答案

【问题标题】：How does this example of redux thunk work?这个 redux thunk 的例子是如何工作的？
【发布时间】：2021-07-24 06:42:40
【问题描述】：

当我们派发一个 thunk 时，相应的承诺状态动作被派发，但是我们如何使用“then”而组件重新渲染多次（从承诺状态动作）？这对我来说没有意义。我不明白这个顺序。

import { unwrapResult } from '@reduxjs/toolkit'

// in the component
const onClick = () => {
  dispatch(fetchUserById(userId))
    .then(unwrapResult)
    .then(originalPromiseResult => {})
    .catch(rejectedValueOrSerializedError => {})
}

https://redux-toolkit.js.org/api/createAsyncThunk

【问题讨论】：

标签： reactjs redux redux-thunk redux-toolkit

【解决方案1】：

我看到了你的痛苦。这是前端开发的病。每个屁都有一些库或工具包，然后它变得令人费解并且超级难以阅读。 + 这个时尚关键词async/await 简直让你脑洞大开。

thunk 是非常简单的redux 中间件，它有 7 行代码，所以我什至可以在这里粘贴它：

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

    return next(action);
  };
}

关键部分以关键字return 开头。这意味着如果您的操作实际上不是操作而是一个函数（带有 thunk 类型签名），它会返回对该函数的调用，而不是返回调用 next(action)。这将破坏链条，但这并不重要，因为我们没有调度实际的动作，而只是调度另一个动作的函数（称为 thunk）。这就是它所做的一切。现在，当我们看到 thunk 是什么时，我们可以破译它

dispatch(fetchUserById(userId))
    .then(unwrapResult)
    .then(originalPromiseResult => {})
    .catch(rejectedValueOrSerializedError => {})

fetchUserById(userId)以形式返回函数

(dispatch, getState) => {
  // do something;
  return somePromise;
}

从 redux-thunk 调用并返回结果。在那之后，你只是在兑现这个承诺。

【讨论】：

【解决方案2】：

这实际上是 JavaScript Promises 的用法，与 React、Redux 或 Thunk 无关。

当您在 Promise 上调用 .then 时，执行停止和其他事情可能发生。一旦底层的 Promise 解决（完成），但在最早的点，一个滴答之后（意味着其他代码可以在其间执行），传递到 .then 的回调被执行。其结果是另一个 Promise，您可以再次调用 .then - 您可以在此处看到。

另请参阅有关 Promises 的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

【讨论】：