angular - 双向组合选择器而无需循环依赖

标签 angular architecture ngrx circular-dependency

我想组合两个选择器来获取产品和类别。

这些类别引用了其产品。

//category.selectors.ts
import {ProductSelector} from "./product.selector.ts"

export const selectCategoryEntitiesDeep = createSelector(
        CategorySelectors.selectCategoryEntities,
        ProductSelectors.selectProductEntitiesDeep,
        (categoryEntities, productEntities): Dictionary<Category> => {
            const _categoryEntities = ObjUtils.cloneDeep(categoryEntities);
            Object.keys(_categoryEntities).forEach(id => {
                _categoryEntities[id]["products"] = _categoryEntities[id].productsIds.map(productId => {
                    return productEntities[productId];
                });
            });

            return _categoryEntities;
        }
    );

这很简单。 在编写产品选择器时,我想添加对该产品所属的所有类别的引用。为了能够做到这一点,我需要将category.selctor.ts导入到product.selector.ts中。 由于我还将产品导入类别,这将导致循环依赖。

// product.selectors.ts
import {CategorySelectors} from "./category.selectors.ts"

export const selectProductEntitiesDeep = createSelectorFactory<{}, Dictionary<Product>>(StateUtils.customObjectMemoizer)(
        ProductSelectors.selectEntities,
        CategorySelectors.selectCategoryEntities,
        (productEntities: Dictionary<Product>,
         categoryEntities: Dictionary<Category>
        ) => {
            return createProductDictionary(productEntities, categoryEntities)
        }
    );

有哪些解决方案可以防止这种情况发生? 现在我正在使用另一个更抽象的文件来组合来自不同状态的选择器。这似乎不是一个可扩展的解决方案。有点乱。

最佳答案

您需要重构您的代码。我创建了另一层依赖于外部选择器的选择器。 merged-one.selector.ts 从 base-one.selector 和 base-two.selector 导入 只需确保基本选择器不依赖于其他选择器

关于angular - 双向组合选择器而无需循环依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60275459/

相关文章:

对于 ng-select 控件的自定义验证,Angular 2 表单状态始终无效

angular - AWS Cloudfront 分发多语言 Angular 应用程序

apache - Nginx和Apache Web服务器

jakarta-ee - Java EE 应用程序架构中的单例与无状态 bean

angular - 无法在拦截器中进行订阅

javascript - 为什么我在使用 ngrx 进行延迟加载的 Angular 6 应用程序的单元测试中收到 "No provider for ReducerManager!"错误?

angular - 如何使用 ngrx-entity 更新实体子集?

rest - Angular2 - Http 服务 - 如何确保我始终拥有实时数据

css - 当 Wrapper 较小时 Angular 改变 flex 方向

wpf - 如何在 mvvm 中设计与 Viewmodel 的业务逻辑交互