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

Question

我有一个包含产品列表的页面。这些产品驻留在商店中，由products减速机管理。调度PRODUCTS.LOAD_ALL操作，捕获效果，执行API调用并调度PRODUCTS.LOAD_ALL_SUCCESS减速器用于填充商店的products操作。

我现在有另一个页面用于编辑特定产品，我对加载/存储此产品的最佳位置有一些疑问。我应该坚持使用效果并发送动作以最终在商店中获得它。如果是这样，我会重用products减速器和active属性，还是会引入新的product减速器来保存这个特定的产品？另外，我是否应该逐步退出表格效果，只需从我的容器组件调用API并将产品传递给必要的孩子？

Answer 1

  

我应该坚持使用效果并发送动作以最终在商店中获取它吗？

是

为什么？

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

1. 在您的编辑组件中，使用的是编辑产品的副本
2. 用户点击＆＃34;保存＆＃34; （或者它保存在input.blur上，等等。）
3. 使用PRODUCTS.SAVE_PRODUCT
分派操作
4. 效果会调用服务方法来保留新的更改（rest-call或localstorage，等等。）
5. 当持久成功时 - ＆gt; reducer使用新的product-object获取一个动作并将其放入商店
6. 将自动通知当前订阅商店更新的所有组件

  

如果是这样，我会重复使用具有活性能的产品减速剂，还是会引入新的产品减速剂来保存这种特定产品？

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

  

另外，我应该在此时逐步取消表格效果，只需从我的容器组件中调用API并将产品传递给必要的孩子吗？

Heeell no ...我的意思是..技术上是的，你可以 - 但你几乎可以放弃ngrx商店带来的关于清洁数据流，数据完整性等的所有好处......

根据应用程序（特别是小应用程序），有些情况可以确定ngrx主要带来代码开销并没有真正的好处 - 因此没有＆＃34;一种完美的方式适用于所有情况＆＃34; - 但我强烈建议不使用一堆只会弄乱代码库的解决方案。