ngRx ----selector 例子 获取后n个state

120 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情

介绍

selector 使你可以给你的应用中的状态组合成一个读模型。 从CQRS的架构角度来说, NgRX分离了读 (selector)和写(reduces)

例子

这个例子展示了如何用createSelector和scan来展示状态转换的历史.

1, 如果应用的两个状态都有值,这个function就返回一个值,否则就返回 'undefined'

export const selectProjectedValues = createSelector(
  selectFoo,
  selectBar,
  (foo, bar) => {
    if (foo && bar) {
      return { foo, bar };
    }

    return undefined;
  }
);

2, 返回当前值和之前两个历史值

// 
export const selectLastStateTransitions = (count: number) => {

  return pipe(
   
    select(selectProjectedValues),
  
    scan((acc, curr) => {
      return [ curr, acc[0], acc[1] ].filter(val => val !== undefined);
    } [] as {foo: number; bar: string}[]) 
  );
}