如何從ngrx商店獲取空值

Question

我在angular 7中使用nrgx / store包。

這是我如何從商店獲得此currentAdAccount的方式。 問題是我在多個組件中有這段代碼。 現在這段代碼是錯誤的，因為將這個值存入存儲的其他東西不會那么快發生，因此下面的這段代碼在前1ms返回null; 然后在10ms后，它返回正確的值。 所以為了使這項工作，我得添加： if(!currentAdAccount) return; 在訂閱中。

this.store.select(fromRoot.currentAdAccount).subscribe(currentAdAccount => {
      console.log("nice1", currentAdAccount);
     this.currentAdAccountId = currentAdAccount.value;
    })

因此，在每個地方，編寫if語句並檢查該值不為空是不好的。

問題1）我如何只以非常簡單的方式獲取非空值，以便它不會重復？

問題2）你如何應對這種情況？

Answer 1

你可以像這樣寫

this.store.pipe(select(fromRoot.currentAdAccount), skip(1))

為了使此代碼有效，您必須像reducer一樣在reducer中設置currentAdAccount的初始狀態

export const initialState = {
 currentAdAccount: null
}

並在視圖中使用異步管道

你有這個問題

所以下面的這段代碼在前1ms返回null; 然后在10ms后，它返回正確的值

因為狀態必須在您第一次加載頁面時初始化初始值，之后，reducer將根據您的操作從商店中獲取新狀態。

如果您有任何問題，請告訴我

Answer 2

您可以使用.pipe(filter(val => val !== null)).subscribe(currentAdAccount => ...))過濾空值.pipe(filter(val => val !== null)).subscribe(currentAdAccount => ...)) 。 NgRx文檔描述了將選擇和過濾方案提取為可管道運算符的最佳實踐 ：

import { select } from '@ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';

export const selectExistingCurrentAdAccount = pipe(
  select(fromRoot.currentAdAccount),
  filter(val => val !== null)
);

並像這樣使用它：

this.store.pipe(selectExistingCurrentAdAccount).subscribe(currentAdAccount => ...)