Javascript 关于使用CreateAySnthunk的问题

我是redux和redux工具包的新手。我正在阅读redux工具包官方文档中的本教程。这是它提供的一个例子

从'@reduxjs/toolkit'导入{createAsynchRunk，createSlice，unwrapResult}
从“/userAPI”导入{userAPI}
const fetchUserById=createAsynchThunk(
“用户/fetchByIdStatus”，
异步（userId，{getState，requestId}）=>{
const{currentRequestId，loading}=getState（）.users
如果（正在加载！='pending'| | requestId！==currentRequestId）{
返回
}
const response=await userAPI.fetchById（userId）
返回响应.data
}
)
const usersSlice=createSlice({
名称：'用户'，
初始状态：{
实体：[]，
正在加载：“空闲”，
currentRequestId:未定义，
错误：null
},
还原子：{}，
外减速器：{
[fetchUserById.pending]：（状态、操作）=>{
如果（state.loading==='idle'）{
state.loading='pending'
state.currentRequestId=action.meta.requestId
}
},
[fetchUserById.Completed]：（状态、操作）=>{
const{requestId}=action.meta
if（state.loading=='pending'&&state.currentRequestId===requestId）{
state.loading='idle'
state.entities.push（action.payload）
state.currentRequestId=未定义
}
},
[fetchUserById.rejected]：（状态、操作）=>{
const{requestId}=action.meta
if（state.loading=='pending'&&state.currentRequestId===requestId）{
state.loading='idle'
state.error=action.error
state.currentRequestId=未定义
}
}
}
})
常量UsersComponent=（）=>{
const{users，loading，error}=useSelector（state=>state.users）
const dispatch=usedpatch（）
const fetchOneUser=async userId=>{
试一试{
const resultAction=等待分派（fetchUserById（userId））
const user=unwrapResult（结果）
showToast（'success'，'Fetched${user.name}`）
}捕捉（错误）{
showToast（'error'，'Fetch failed:${err.message}`）
}
}
//在这里呈现用户界面
}

我的问题是，因为我们已经处理了生命周期操作创建者拒绝承诺的情况，即

[fetchUserById.rejected]：（状态、操作）=>{
const{requestId}=action.meta
if（state.loading=='pending'&&state.currentRequestId===requestId）{
state.loading='idle'
state.error=action.error
state.currentRequestId=未定义
}
}

那么，为什么在

UsersComponent

中，我们仍然需要尝试并捕获分派引发的错误。我们不能从

错误状态判断请求是否失败吗？更清楚地说，我用以下方式编写
UsersComponent
怎么样：


常量UsersComponent=（）=>{
const{users，loading，error}=useSelector（state=>state.users）
const dispatch=usedpatch（）
useffect（（）=>{
分派（fetchUserById（userId））
}[快讯]）
如果（错误）{
showtoos（'error'，'Fetch failed:${error.message}`）
}否则，如果（加载）{
showToast（'加载'）
}否则{
showToast（'success'，'Fetched${user.name}`）
}
//在这里呈现用户界面
}

另外，我想知道
fetchUserById.rejected
何时会被调度？根据文档，
createAsynchThunk
将始终返回已解决的承诺。如果我们在
createAsyncThunk

if（正在加载！==“挂起”| |请求ID！==currentRequestId）{
返回
}

那么分派的生命周期操作将
完成
对吗？调度
拒绝的
生命周期操作需要什么条件？仅当回调内部引发异常时

我的最后一个问题是，如果我想检查我得到的数据的形状是否正确，例如，我想确定它是否有一个名为
data
的属性。我怎样才能做到这一点？如果我在
createAsyncThunk
中将回调重写为


const fetchUserById=createAsynchThunk(
“用户/fetchByIdStatus”，
异步（userId，{getState，requestId}）=>{
const{currentRequestId，loading}=getState（）.users
如果（正在加载！='pending'| | requestId！==currentRequestId）{
返回
}
const response=await userAPI.fetchById（userId）
如果（！response.data）抛出新错误（'无数据'）
返回响应.data
}
)

当
响应
上实际上没有
数据
属性时，
拒绝
生命周期操作是否会被调度？
关于问题的第一部分：
是的，您可以在后续渲染中执行此操作。
但是如果你只是写

  if(error) {
    showToast('error', `Fetch failed: ${error.message}`)
  } else if(loading) {
    showToast('loading')
  } else {
    showToast('success', `Fetched ${user.name}`)
  }

这将在该组件的每个后续渲染上显示一个祝酒词。在React中，每次渲染父对象时，该组件都会重新渲染，因此您可能会看到很多祝酒词

当然，你也可以使用
useEfect
，然后这样做，如果你更喜欢的话。这只是一种风格，有些人喜欢一种方式，有些人喜欢另一种方式

例如，当
userAPI.fetchById
可能由于网络问题而引发错误时，将调度
rejected
操作

如果只调用
return
，它实际上会返回
undefined
，并导致以
undefined
作为有效负载的已完成操作。
请在每篇文章中关注一个问题，第一个问题是：您的示例不起作用，因为您发送了
asyncThunk
，它会返回一个承诺，你可以很容易地检查你的代码。@DennisVash它实际上是有效的。我知道这是一个承诺。但是通过调度该
asyncThunk
，thunk将调度挂起的操作，如果承诺成功解决，则调度已完成的操作，承诺值为action.payload。那么问题是什么？如果行得通的话ok@DennisVash问题