Question

我正在使用Redux构建一个React应用程序

在redux商店中，假设我有一个书名，标题为error，isLoading

 const bookStore = {
  title: null,
  isLoading: false, 
  error: null
 }

我有两个动作： 1.从服务器获取/获取书籍数据 2，更新/放置书名

每个动作，我必须处理isLoading，错误。

所以基本上我可以在react组件中检查（我们现在忽略了加载）

 if (error) {return ErrorComponent}
 else return BookComponent

问题是我想以不同的方式显示错误。如果请求是GET（获取数据），我想将错误显示为ErrorComponent。如果请求是PUT（更新标题），我想将错误显示为Toast。

如果redux存储区中只有一个错误属性，怎么办？

我应该这样写代码：

 const bookStore = {
  title: null,
  isLoading: false, 
  fetchError: null,
  putError: null
 }

但是在这种情况下，我必须像

 if (fetchError) {display ErrorComponent}
 else if (putError) {display Toast}
 else display BookComponent

有点不方便。

你们能告诉我最好的方法吗？谢谢进阶

Answer 1

我想您可以将error设置为对象 error : { type: action.payload.type , value: action.payload.error}

您的代码将是：

if (error) {
     return error.type === 'error1' ? ErrorComponent : Toast; // or you can handle `toast` inside ErrorComponent  
}
else {  return BookComponent   }

此外，您还可以根据在reducer中设置的type处理错误消息的显示。

希望这会有所帮助！

显示不同的错误反应redux

1 个答案: