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

Question

我在从商店中的状态检索列表时遇到问题，因为该列表被一个对象包围。

这是我的代码

啤酒-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: [
      ...

Answer 1

beerReducer 可能添加到 beers 功能？所以你必须先select啤酒状态。

   this.beers$ = this.store.select((state: AppState) => state.beers.beers);

Answer 2

好的。我终于弄明白了。我需要调整我的状态树并向 select 商店的啤酒中添加一些 selectors。

这是我更新的 NgRx 代码，其中的更改已被注释：

啤酒-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<AppState>) {
  }

  ngOnInit(): void {
    this.beers$ = this.store.select(selectBeers); // Using selector here
    this.store.dispatch(getBeersOnTap());
  }
}

app.state.ts（新文件）

export interface AppState {
  beerState: BeerState
}

beer.selectors.ts（新文件）

const selectBeerState = (state: AppState) => state.beerState;

export const selectBeers = createSelector(
    selectBeerState,
    (state) => state.beers
)

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

Getting object instead of list from selecting the store with NgRx

state

action

store

ngrx