代码之家  ›  专栏  ›  技术社区  ›  painotpi

ngrx简单状态减速机

  •  0
  • painotpi  · 技术社区  · 5 年前

    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>
    

    export interface IState {
      num: number
    }
    

    好像我错过了一些小事。

    斯塔克布利茨: https://stackblitz.com/edit/angular-72vhrz

    1 回复  |  直到 5 年前
        1
  •  1
  •   timdeschryver    5 年前
    <p> (count$| async).name </p>
    

    你首先必须使用 async 在可观察的管道上,这将打开它的值,您可以访问它。