首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ngrx简单状态归约器

ngrx简单状态归约器
EN

Stack Overflow用户
提问于 2020-01-30 02:10:52
回答 1查看 93关注 0票数 0

angular和ngrx的新手,跟随文档,

我将基本示例修改为以下内容:

行为

代码语言:javascript
复制
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

减速机

代码语言:javascript
复制
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 })),
);

模块

代码语言:javascript
复制
StoreModule.forRoot({ count: counterReducer })

组件

TS

代码语言:javascript
复制
count$: Observable<IState>;

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

HTML

代码语言:javascript
复制
<p> count$.num | async </p>

Model.ts

代码语言:javascript
复制
export interface IState {
  num: number
}

看起来我错过了一些微不足道的东西。

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-30 02:20:38

代码语言:javascript
复制
<p> (count$| async).name </p>

首先必须在上明显地使用async管道,这将展开它的值,您可以访问它。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59973163

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档