javascript - Ngrx Store - 所有 UI 更改都应该存储吗？

Question

我将 Angular 2 与 Ngrx 和 Angular Material 一起使用。 是否所有 UI 更改(如下拉菜单或对话框)都应该存在？

例如:

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

我应该在商店中支持下拉菜单吗？

下一个例子:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

我可以使用open方法吗？也许我应该创建一个组件，将 sidenav 包装在仅对输入 Input() open; 进行操作的组件中？

Answer 1

对我来说，我通常会问 3 个问题。

• UI 更改是否与组件隔离并且不影响其他组件？

• View销毁后返回时是否需要持久化UI变化？

• 出于调试目的，您是否希望跟踪此状态(可能是为了重新创建最终用户的 View ？)

如果您对这 3 个问题的回答是否定的，那么您可能不需要将该组件的状态放入商店中。

通过不耦合商店的某些东西，您可以使其更加模块化、更易于测试和可重用。