angular ngrx/store 何时以及如何加载数据

Question

我对整个 redux 模式还很陌生。我不确定从服务器加载数据并将其添加到商店的最佳方式。

想象一下数据的两层层次结构:

• 用户
  • 付款

每个用户都可以进行零对多付款。

根据我在网上收集到的信息，最好在客户端存储规范化数据，但为了简单起见，让我们在此示例中使用对象数组:

{
  users: [],
  payments: []
}

现在，如果我想显示一个用户的所有付款，我可以浏览商店中的所有付款并过滤掉具有预定义 userId 的付款。

或者，如果数据完全规范化，每个用户对象都会有一个名为 payments 的数组，其中包含属于该用户的付款 ID，并且可以通过这种方式提取它们。

如果所有现有数据都预加载到存储中，一切都可以正常工作，但如果不可能(例如，如果使用分页)，是否有任何替代方案？

• 我是否只加载特定用户的付款并将它们放入付款数组中？当我想显示另一个用户的数据时怎么办？我是将它们也添加到 payments 数组还是重置数组？
• 我是否将一个名为selectedUserPayments 的新数组添加到存储中并预先填充该数组？如果是这种情况，我可能在 payments 数组(例如显示系统中所有付款的列表)和 selectedUserPayments 数组，我必须同步它们。

是否有解决这些问题的标准方法？我在网上找到的所有示例要么没有分层实体，要么提前预加载所有数据。

Answer 1

通常您不希望在两个不同的地方拥有相同的数据，因此您会使用规范化版本并在不同的地方仅存储 ID。 您可以将状态想象成一个本地数据库，您不希望在多个地方拥有相同的数据。如果你想要一个 selectedUserPayments 的集合，你应该将它存储为一个 ID 列表。

如何为特定用户加载数据取决于您要使用的缓存策略。如果支付信息在服务器上经常变化，您可能希望每次都重新加载它，并在每次选择用户时重新初始化支付数组。如果它不经常更改，则更实用的方法是检查您何时选择用户是否有付款，如果没有，请从服务器读取它们并将它们添加到状态中。通过这种方式访问​​之前选择的用户将保存一个请求，因为您不需要再次获取付款。