reactjs 使用RTK查询时,async/await方法对promise不好吗?

yqlxgs2m  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(125)

刚刚加入了一个项目,其中RTK Query是第一次在React Native中实现。这似乎是团队的其他成员第一次使用RTK Query。目前的设置方式,他们经常使用类似于

const [someFunctionality] = useSomeFunctionalityMutation();

return async (someParams) => { 
const response = await someFunctionality(someParams)

if ('data' in response) { dispatch(successAction) }
else if ('error' in response) { 
  dispatch(errorAction); 
  setSomeState(error); 
} 
}

我在我的职业生涯中相当早期,并且只在以前的一个项目中使用RTK Query。

const [someFunctionality] = useSomeFunctionalityMutation();

someFunctionality(someParams)
  .unwrap()
  .then(() => dispatch(successAction))
  .catch((error) => {
    dispatch(errorAction);
    setSomeState(error);
  }

尽管我们从来没有把它写成一个可重用的函数。
第一种方法似乎没有问题,但我想知道:
一种方法比另一种方法更受欢迎吗?为什么?第一种方法是否会潜在地导致在基本测试中未被注意到的问题?由于此功能对团队中的许多人来说是新的,所以我想确保我们正在建立良好的标准。感谢您的帮助!

h6my8fg2

h6my8fg21#

Promise chaining和async..await只是相同功能的两种不同表示法。

async function someFn() {
  try {
    const result = await someFunctionality(someParams).unwrap();
    dispatch(successAction)
  } catch {
    dispatch(errorAction);
    setSomeState(error);
  }
}

也就是说,你可能不应该像那样分派动作。首先,你可以在端点生命周期中而不是在组件中这样做,另一方面,通常你根本不需要这样做,因为你的errorActionsuccessAction切片也可以为api.endpoints.someFunctionality.matchFulfilled添加extraReducers,这意味着你根本不需要任何额外的分派动作。

相关问题