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

Question

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

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

Answer 1

Should I stick with effects and dispatch an action to eventually get it in the store?

是的。

为什么？

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

1. 在您的编辑组件中，用于编辑产品的副本
2. 用户点击“保存”(或保存在 input.blur 等上)
3. 使用 PRODUCTS.SAVE_PRODUCT 调度操作
4. 效果将调用服务方法来保存新的更改(休息调用或本地存储等)
5. 当持久化成功时 -> reducer 获取新产品对象的操作并将其放入存储中
6. 当前订阅商店更新的所有组件都会自动收到通知

<小时/>

If so, would I reuse the products reducer with an active property or would I introduce a new product reducer to hold this specific product?

如果您的产品数组已经包含所有产品的所有详细信息，我建议使用那里的数据 - 但请记住:永远不要直接编辑商店中的商店数据，只能处理副本(这可以强制执行)通过使用不可变的，如果你还没有这样做)

<小时/>

Alternative, should I step away form effects at this point and just call the API from my container component and pass the product down to the necessary children?

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

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