Angular - 使用 NGRX / 效果加载特定项目的数据

Question

我有一个包含产品列表的页面。这些产品驻留在商店中并由products reducer 管理。 PRODUCTS.LOAD_ALL action 被调度，一个 effect 捕获它，执行一个 API 调用并调度一个 PRODUCTS.LOAD_ALL_SUCCESS action，products reducer 使用它来填充 store。

我现在有另一个页面，用于编辑特定产品，我对加载/存储该产品的最佳位置有一些疑问。我是否应该坚持使用效果并发送操作以最终将其放入商店。如果是这样，我会重复使用具有active 属性的products 减速器还是引入一个新的product 减速器来保存这个特定的产品？或者，此时我是否应该放弃表单效果，只从我的容器组件中调用 API 并将产品传递给必要的子组件？

Answer 1

我应该坚持使用效果并派发一个动作以最终将其放入商店吗？

是的。

为什么？

因为这样您的所有组件都可以继续依赖存储和有效数据。 - 每当用户完成编辑时，应该会发生以下数据流：

1. 在您的编辑组件中，使用的编辑产品的副本
2. 用户点击“保存”（或保存在 input.blur 等..）
3. 使用PRODUCTS.SAVE_PRODUCT 调度操作
4. 效果将调用服务方法来持久化新更改（rest-call 或 localstorage 等）
5. 当持久化成功时 -> reducer 对新的产品对象执行操作并将其放入存储中
6. 将自动通知当前订阅存储更新的所有组件

---

如果是这样，我会重复使用具有活动属性的 products reducer，还是会引入一个新的 product reducer 来容纳这个特定的产品？

如果您的 products-array 已经包含所有产品的所有详细信息，我建议使用那里的数据 - 但请记住：永远不要直接从商店编辑​​ store-data，只能处理副本（这可以强制执行通过使用不可变对象，以防你还没有这样做）

---

或者，我是否应该在这一点上放弃表单效果，只从我的容器组件中调用 API 并将产品传递给必要的子组件？

Heeell 不......我的意思是......从技术上讲是的，你可以 - 但你实际上会失去 ngrx-store 在干净的数据流、数据完整性等方面带来的所有好处......

根据应用程序（尤其是小型应用程序），可以肯定的是，ngrx 只是主要带来代码开销而没有真正的好处 - 所以没有 “适用于所有情况的完美方法” -但我强烈建议不要半途而废地使用一堆只会弄乱代码库的解决方案。