Angular 8 將 ngrx 狀態綁定到組件

Question

我是 Angular 的新手，我想將 HTML 中的一些類名綁定到我所在州的一些值。 起初我只有一個狀態，它只是一些布爾值，一切正常。 現在我將狀態更改為一個對象，以便我可以在其中保存更多信息。 雖然我使用的方法或多或少與以前相同，但類名沒有改變。 狀態確實發生了變化。 有人可以告訴我我的錯誤是什么，如果有另一種更合適的方法來做我想做的事情，也請告訴我。

角度版本是 8.2.14。

這是我的代碼：

減速器.ts：

export type ShoppinCartState = {
  CartIsOpen: boolean;
};

export type HamburgerState = {
  MenuIsOpen: boolean;
};

export function hamburgerReducer(
  state: HamburgerState = { MenuIsOpen: false },
  action: Action
) {
  switch (action.type) {
    case "HAMBURGER.TOGGLE":
      console.log("HAMBURGER.Toggle called " + state.MenuIsOpen);
      return {
        ...state,
        MenuIsOpen: !state.MenuIsOpen
      };
    case "HAMBURGER.CLOSE":
      return {
        ...state,
        MenuIsOpen: false
      };
    case "HAMBURGER.OPEN":
      return {
        ...state,
        MenuIsOpen: true
      };
    default:
      return state;
  }
}

export function shoppingCartReducer(
  state: ShoppinCartState = { CartIsOpen: false },
  action: Action
) {
  switch (action.type) {
    case "CART.TOGGLE":
      console.log("Tooggle cart called " + state.CartIsOpen);
      return {
        ...state,
        CartIsOpen: !state.CartIsOpen
      };
    default:
      return state;
  }
}

這是我的組件。 當用戶點擊漢堡圖標時，會發送一個改變狀態的動作。 還有另一部分與國家有關。 當值為真時，類名應該是“可見的”。

<app-hamburger-icon (click)="onHamburgerIconClick()"></app-hamburger-icon>
  <div id="Logo"><a (click)="onLinkClick()" routerLink="/">E99-EsAns</a></div>
  <ul [ngClass]="{ visible: hamburgerClicked$ | async }">

這就是 component.ts 文件

import { Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { HamburgerState } from "src/app/reducer";

@Component({
  selector: "app-navigationbar",
  templateUrl: "./navigationbar.component.html",
  styleUrls: ["./navigationbar.component.css"]
})
export class NavigationbarComponent implements OnInit {
  hamburgerClicked$: Observable<boolean>;

  constructor(private store: Store<HamburgerState>) {
    this.hamburgerClicked$ = this.store.select("MenuIsOpen");
  }

  ngOnInit() {}

  onHamburgerIconClick() {
    console.log(this.hamburgerClicked$);
    this.store.dispatch({ type: "HAMBURGER.TOGGLE" });
  }

  onLinkClick() {
    this.store.dispatch({ type: "HAMBURGER.CLOSE" });
  }

  onShoppingCartIconClicked() {
    this.store.dispatch({ type: "CART.TOGGLE" });
  }
}

我的 app.module.ts 的一些片段

import { hamburgerReducer, shoppingCartReducer } from "./reducer";
...
...
...
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    StoreModule.forRoot({
      hamburgerReducer: hamburgerReducer,
      shoppingCartReducer: shoppingCartReducer
    })
  ],

Answer 1

當您將Store注入組件時，您對全局狀態的結構進行操作。 所以選擇必須“選擇”到這個結構中才能訪問正確的對象。

只有reducer 函數得到了這個全局狀態的一部分。 我們可以在app.module.ts中看到您定義商店的最有可能的app.module.ts ：

    StoreModule.forRoot({
      hamburgerReducer: hamburgerReducer,
      shoppingCartReducer: shoppingCartReducer
    })

最佳實踐是創建一個接口State來描述您的商店結構：

export interface State {
   hamburgerReducer: HamburgerState;
   shoppingCartReducer: ShoppingCartState;
}

然后在注入 store 時使用這個接口：

constructor(private store: Store<State>)

然后您可以通過以下方式選擇漢堡菜單狀態：

this.store.select(state => state.hamburgerReducer.MenuIsOpen)