将服务器数据获取到 React + Redux 应用程序的最佳方式

Question

大家好，这是一个关于如何使用 React 和 Redux 实现我的应用程序的一般性问题。

我的申请

我正在构建一个用于管理比赛的 web 应用程序（更多详细信息请点击此处https://ziggy6792.github.io/posts/wakeboard-competition-app/）

我有一个带有多个数据对象（嵌套如下）的 graphql 后端（放大 Appsync api）；

• 事件
  • 比赛
    • 热火

我会将获取的数据存储在redux中。

我将有一个 /event 路由来显示事件数据，然后允许用户导航到儿童比赛和儿童预赛。我希望用户能够共享指向比赛/活动/热身赛的链接，因此将在 window.location.search 参数中包含 ID。

例如： myApp/events?id=eventId

活动名称：我的活动

比赛

• 竞赛 1（链接到 comp1）
• 竞赛 2（链接到 comp2）

我的计划

我已经实现了一个 graphql 端点 (getDataEntity(String!Id))，它可以接收一个 id 并返回该 id 的 Event/Competition/Heat。我认为这将是一个好方法，因为我可以共享许多调度操作和更新状态逻辑，而无需指定我正在加载的确切数据实体（对象 id 也是全局唯一的，所以我看不出有任何问题接近）。

然后我可以使用 window.location.search 参数来设置和加载我想在页面上显示的实体的 ID。 例如。 myapp.com/events?dataEntityId=123

理论上，当用户在应用程序周围点击时，这些数据中的任何一个都可以随时更改（即，如果评委为比赛添加了新结果）。

一个简单的解决方案？

据我所知，最简单的工作解决方案是在加载页面时始终获取每个数据实体的所有数据（在我收到数据之前显示微调器），然后将其存储在我的 redux 存储中。例如

events:{
   laodedDataEntiy: {id, "123", type: "Event", name: "My Event", description: "Wellcome..."},
}

但是我认为这有点愚蠢，因为大多数时候加载页面时数据不会改变，所以让用户等待重新获取是浪费时间。

更好的解决方案？

我在想一个更好的解决方案可能是通过 id 将加载的数据实体存储在我的 redux 存储中，例如

events:{
   laodedDataEntities:{
     "123": {id, "123", type: "Event", name: "My Event", description: "Wellcome..."},
     "456": {id, "456", type: "Competition", name: "My Competition", description: "Wellcome..."},
    }
}

然后，当加载页面时，我可以立即显示来自我的 url 的 dataEntityId 的 redux 疼痛中的任何内容（如果有的话）。然后异步调用我的端点以获取（可能）更新的数据并更新我的 redux 存储。如果 redux 中的数据与我当前的 props 不同（如第一次加载的数据），我可以使用 React.memo 重新渲染。

我基本上会将我的 redux 存储用作服务器上内容的缓存，这样我的页面可以在检查任何更改之前快速加载。

问题

1. 您如何看待我提出的解决方案？
2. 我是否过于复杂了？
3. 这里的标准方法是什么（任何示例都会很棒！）？
4. 我应该注意哪些陷阱？

我想这要么是一种非常常见的实现方式，要么不是因为一些我没有想到的重要原因。

非常感谢，

西蒙

Answer 1

标准（使用最广泛）是“Apollo 客户端”（具有规范化缓存、错误处理等），它可能涵盖了您所有的数据操作需求，甚至是真实的时间更新（订阅）。

您可以使用其他“graphQL 客户端”（例如 Relay）。

当然您可以使用fetch 或axios，但它主要用于简单的用例，f.e.没有复杂关系的单个查询或数据。

您仍然可以将 redux 用于其设计的主要目标 - 全局应用状态 - f.e.保存可隐藏模式的状态，记住排序首选项......但几乎所有这些（本地状态）也可以在 Apollo 中完成。 F.e. login 突变、记录的用户数据、朋友...