使用 NgRx 从选择商店中获取对象而不是列表

大佬教程收集整理的这篇文章主要介绍了使用 NgRx 从选择商店中获取对象而不是列表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 NgRx 从选择商店中获取对象而不是列表？

我在从 store 中的 state 检索列表时遇到问题，因为该列表被一个对象环绕。

这是我的代码

beer-List.component.ts

@Component({
  SELEctor: 'app-beer-List',templateUrl: './beer-List.component.HTML',styleUrls: ['./beer-List.component.CSS']
})
export class BeerListComponent implements OnInit {
  public beers$: Observable<Beer[]>;
  
  constructor(private store: Store<BeerState>) {
  }

  ngOnInit(): voID {
    this.beers$ = this.store.SELEct((state: BeerStatE) => state.beers);
    this.store.dispatch(getBeersOnTap());
  }

beer.actions.ts

export const getBeersOnTap = createAction(
  '[Beer List] Get beers'
);
export const getBeersOnTapsuccess = createAction(
  '[Beer List] Get beers succeeded',props<{Beers: Beer[]}>()
);
export const getBeersOnTapFailed = createAction(
  '[Beer List] Get beers Failed'
);

beer.reducers.ts

export interface BeerState {
  beers: Beer[];
}

export const initialState: BeerState = {
  beers: []
};

export const beerReducer = createReducer(
  initialState,on(getBeersOnTapsuccess,(state,{Beers}) => ({...state,beers: beers}) // Payload comes from an effect
));

export function reducer(state: BeerState | undefined,action: Action) {
  return beerReducer(state,action);
}

我从商店里挑选啤酒得到了什么：

{
  beers: {
    beers: [
      ...

解决方法

   this.beers$ = this.store.SELEct((state: AppStatE) => state.beers.beers);

@Component({
  SELEctor: 'app-beer-list',templateUrl: './beer-list.component.html',styleUrls: ['./beer-list.component.css']
})
export class BeerListComponent implements OnInit {
  public beers$: Observable<Beer[]>;
  
  constructor(private store: Store<AppState>) {
  }

  ngOnInit(): void {
    this.beers$ = this.store.SELEct(SELEctBeers); // Using SELEctor here
    this.store.dispatch(getBeersOnTap());
  }
}

export interface AppState {
  beerState: BeerState
}

const SELEctBeerState = (state: AppStatE) => state.beerState;

export const SELEctBeers = createSELEctor(
    SELEctBeerState,(statE) => state.beers
)

大佬总结

以上是大佬教程为你收集整理的使用 NgRx 从选择商店中获取对象而不是列表全部内容，希望文章能够帮你解决使用 NgRx 从选择商店中获取对象而不是列表所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。