Question

在我的角度2应用程序中，我开始将所有项目重构为ngrx模式，但我仍然有一些问题：

我的应用程序检索应用列表和应用类别列表

1-我可以管理类似＆＃34; selectedCategory＆＃34; （在这种情况下，只有一个可以选择，因此它的原则是一个原始的）？：

Categories.component.ts

...
...
OnCategorySelect (applicationID : string) {
this.selectedCategory = applicationID 
}

或者我应该为它创建一个selectedCategory缩减器吗？

2 - 当从智能组件（applicationsListComponent）传递数据到哑一个（categoryComponent）时，我用异步管道这样做：

**ApplicationsListComponent.ts**

....
....
<app-category [categories]='appCategories | async'></app-category>

在这种情况下，我应该将changeDetection: ChangeDetectionStrategy.OnPush放入哑组件中吗？

3-在我的哑组件（categoryComponent）中，当我从智能组件中接收categories时@Input i＆＃39;我没有将其声明为Observable，但我正在这样做：

category.component.ts

 @Input() appCategories: CategoryInfo[];

category.component.html

<div *ngFor='let app of appCategories'>....</div>

所以在这种情况下，我不知道是否必须将@Input从智能组件接收的数据声明为Observable。

有什么建议吗？

Answer 1

1-对于这种情况，我创建了单独的reducer＆＃34; selectedCategory＆＃34;。它的实现非常简单

    import { ActionReducer, Action } from '@ngrx/store';
    import { SELECT_CATEGORY } from '../actions';

    export const selectedCategory: ActionReducer<ICategory> = (state: ICategory, {type, payload}: Action) => {
        switch (type) {
            case SELECT_CATEGORY:
                return payload;

            default:
                return state;
        }
    };

2-是的。 ngrx中的商店是不可变的。这意味着Angular在监视某些对象的属性是否发生变化时没有任何意义。输入数据可以更改的唯一方法是更改整个@Input对象。所以changeDetection: ChangeDetectionStrategy.OnPush没问题。

3-号@Input属性不应该是Observables。通过async管道绑定它们（就像在你的例子中一样）就足够了。如果将Observable直接传递给转储组件（没有async），则Angular更改检测将无法按预期工作。即使实际数据发生变化，对Observable对象的引用也将始终保持不变。在这种情况下，如果您想对数据更改做出反应，则需要手动订阅（并取消订阅）Observable，这将变得完全混乱。

Answer 2

在@ user1614543的回答中添加更多内容

如果你想检测来自可观察源的@Input的变化。

在哑组件中使用以下代码。

ngOnChanges(changes: SimpleChanges) { 
  if (changes.hasOwnProperty('appCategories')) {
     ...
  }
}

Angular 2 ngrx /存储最佳实践

2 个答案: