Reactjs 这个redux thunk示例是如何工作的？

当我们发送thunk时，相应的承诺状态操作被发送，但是我们如何使用“then”，同时组件（从承诺状态操作）多次重新呈现？这对我来说毫无意义。我不明白这个命令

import { unwrapResult } from '@reduxjs/toolkit'

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

---

这实际上是JavaScript承诺的使用，与React、Redux或Thunk没有太大关系

当你调用

。然后

一个承诺，执行就会停止，其他事情也会发生。一旦基本承诺得到解决（完成），但在最早的时候，一个勾号之后（这意味着可以在两者之间执行其他代码），回调传递到

。然后执行
。这样做的结果是另一个承诺，您可以调用
。然后再次调用
——您可以在这里看到

另请参阅有关承诺的MDN文档：
我看到了您的痛苦。这是前端开发的一种疾病。每放一个屁都会有一些图书馆或工具箱，然后它就会变得错综复杂，非常难以阅读这个流行的关键字
async/await
只会让你的大脑爆炸

thunk
非常简单
redux
中间件它有7行代码，所以我甚至可以将它粘贴到这里：

函数createThunkMiddleware（外部参数）{
return（{dispatch，getState}）=>（next）=>（action）=>{
如果（动作类型===‘功能’）{
返回操作（dispatch、getState、extraArgument）；
}
返回下一步（操作）；
};
}

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

dispatch（fetchUserById（userId））
.然后（展开结果）
.then（originalPromiseResult=>{}）
.catch（rejectedValueOrSerializedError=>{}）

fetchUserById（userId）
返回表单中的函数

（调度，获取状态）=>{
//做点什么；
回报一些承诺；
}

从redux thunk调用，并返回结果。
在那之后，你只会把承诺拴在铁链上