是否应将错误和加载存储在商店或州中?

时间:2016-07-12 06:48:07

标签: reactjs redux

我在试图找出应该存储加载或错误状态等内容时遇到问题。

假设我有一个react组件从mount上的服务器获取数据。我正在做的是调度一个动作FETCH_SOME_DATA,它将处理异步部分,这要归功于中间件,中间件依次根据异步请求的结果调度FETCH_SOME_DATA_SUCCESSFETCH_SOME_DATA_FAILURE

现在,我想要做的是在我获取数据时向用户显示正在发生的事情,所以我需要能让我知道正在加载的东西。我想我可以让减速器对我的FETCH_SOME_DATA操作做出反应并更新我的商店以切换isLoading值,但这里是我遇到问题的地方:对我来说,这不应该在商店里,但在组件的状态。

我想这可能很奇怪,所以这就是为什么:让我说我正在显示博客的最后5篇文章和整个列表(分页),我不希望他们两个都显示一个加载器,如果用户点击我的整个列表中的“查看更多文章”...

同样的错误,真的。假设我的新闻提取失败了。我不希望我的两个组件都显示错误。它们应该是独立的 - 每个组件都应该尝试获取其数据并相应地对错误做出反应。

我希望我很清楚...我想我对这个问题有很强烈的看法,但每个人似乎都有不同的想法,但我不明白为什么。希望你们向我解释在哪里存储“临时数据”以及原因。

谢谢!

2 个答案:

答案 0 :(得分:0)

var codes = GlyphInfo.aggregate([ {$unwind: "$peopleInfo"}, {$lookup: { from: "users", localField: "peopleInfo.name", foreignField: "userId", as: "details" } }, {$unwind: "$details"}, {$project: {"peopleInfo.Count": 1, "details.code3": 1}} ]) priciples之一是你有一个单一的事实来源。您的应用程序将只有一个状态 - 此状态由商店管理。您的状态不仅包含从服务器获取的数据,还包含有关UI当前状态的信息。因此,如果要为当前活动的异步请求呈现加载指示符,则此信息将存储在状态中,而不是存储在组件中。

答案 1 :(得分:0)

无论您是单独提取帖子列表还是每个帖子,您的商店都有责任反映发生的情况。如果在获取数据时出现错误,您可以设置" status"标记为"错误"在你的帖子列表减少器或每个帖子项目单独。

您的组件可以根据当前状态向用户显示内容。您的PostList组件可能会从商店收到道具status,并向最终用户显示一些有用的信息。每个帖子都是一样的,其中一个可能的ui状态是一个错误状态,所以你应该有一个为你的组件定义这个ui状态的prop,以便让他向最终用户显示错误。