什么时候应该在 ReactJs 中使用商店

When I should use a store in ReactJs

我对 ReactJS/Flux 实施中的商店有一些疑问。

基本上,我的所有 API 请求都使用商店。但有时,我认为商店是一种矫枉过正的功能。

一个简单的例子: 我只想显示在我的仪表板主页上注册的最后五个用户的列表。在用户刷新浏览器之前,我永远不想刷新此列表。我应该为此使用商店吗?!或者,也许我可以为我的主页创建一个 "global" 商店,其中包含所有这些小东西(API 请求的数据的静态显示)。

我还有一个关于商店的问题,一个中型应用程序有多少商店?因为我的店已经很多了(20-30家)。

您是按页面创建一个商店?!按型号?!按组件?!

感谢您的回复。

TL;DR:许多 Reducer,一个 Store。

你用 Redux 标记了这个,所以我将基于你正在使用 Redux 或想用作你的 Flux 实现的假设来回答。

关于 Store 的数量,来自 Redux 文档:

It’s important to note that you’ll only have a single store in a Redux application. When you want to split your data handling logic, you’ll use reducer composition instead of many stores.

因此,您可能想要创建一个主页 Reducer 来处理主页的所有 API 响应,并将它们保存到您的单个 Store。

这个答案假设了一些事情,但这是我的尝试:

在这种情况下,商店可能有点矫枉过正,因为在用户刷新页面后没有更新发生。对我来说似乎是一个静态对象。如果您还没有商店并且想在没有商店的情况下继续前进,我建议(假设您使用的是 flux)在需要此列表的组件中创建您的调度程序事件。调度员将监听您的操作中的事件。我猜您的操作会调用 back-end 来获取最后 5 个用户,因此该操作会发出一个包含您想要的 5 个用户的事件。当调度程序收到事件时,您可以在组件中设置 5 个用户的列表。

我发现的商店用例是当您的 "living" 对象随页面上的用户交互而变化时。使用商店,可以很容易地根据时间间隔每隔一段时间实时更新您的 5 个用户列表,并且它还提供了一种将调度程序逻辑从您的组件抽象到一个漂亮整洁的商店中的方法。

在您的简单示例中,您可能不需要商店,但我仍会使用商店,因为它使您的应用程序具有可扩展性。您永远不知道什么时候会要求您为其添加新功能。

关于你的另一个问题,这完全取决于 20-30 家商店听起来有点过分。

就我个人而言,我使用 redux,我只有一个商店有多个减速器,我使用 redux 的 combineReducers 组合它们。