ngrx 简单状态减速器答案

【问题标题】：ngrx simple state reducerngrx 简单状态减速器
【发布时间】：2020-01-29 18:10:51
【问题描述】：

Angular 和 ngrx 的新手，遵循文档，

我将基本示例修改为以下，

动作

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 })

组件

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

【问题讨论】：

标签： angular ngrx

【解决方案1】：

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

您首先必须在 observably 上使用async 管道，这将打开它的值并且您可以访问它。

【讨论】：