ngrx простой государственный редуктор

Question

Новый для angular и ngrx, следуя документам,

Я изменил пример basi c на следующий,

Действия

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

Редуктор

export const initialState = {
  num: 0
};

const _counterReducer = createReducer(initialState,
  on(increment, state => ({ num: state.num + 1})),
  on(decrement, state => ({ num: state.num - 1})),
  on(reset, state => ({ num: 0 })),
);

Модуль

StoreModule.forRoot({ count: counterReducer })

Компонент

TS

count$: Observable<IState>;

constructor(private store: Store<{ count: IState }>) {
    this.count$ = store.pipe(select('count'));
}

HTML

<p> count$.num | async </p>

Модель. ts

export interface IState {
  num: number
}

Похоже, мне не хватает чего-то тривиального.

StackBlitz: https://stackblitz.com/edit/angular-72vhrz

Answer 1

<p> (count$| async).name </p>

Сначала вы должны использовать трубу async на обозримом уровне, это развернет его значение и вы сможете получить к нему доступ.