从angular中的store中按id选择元素

import { StoreModule } from '@ngrx/store';

@NgModule({
  imports: [
    StoreModule.forRoot({}) // 添加StoreModule
  ],
  // ...
})
export class AppModule { }

import { createReducer, on } from '@ngrx/store';
import { selectItemById } from './actions';

export interface AppState {
  items: Item[];
}

export interface Item {
  id: number;
  name: string;
}

export const initialState: AppState = {
  items: []
};

export const itemReducer = createReducer(
  initialState,
  on(selectItemById, (state, { id }) => {
    const selectedItem = state.items.find(item => item.id === id);
    return { ...state, selectedItem };
  })
);

import { createAction, props } from '@ngrx/store';

export const selectItemById = createAction(
  '[Items] Select Item By Id',
  props<{ id: number }>()
);

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectItemById } from './actions';

@Component({
  selector: 'app-item',
  template: `
    <button (click)="selectItem(1)">Select Item 1</button>
    <button (click)="selectItem(2)">Select Item 2</button>
    <div>{{ selectedItem | json }}</div>
  `
})
export class ItemComponent {
  selectedItem: Item;

  constructor(private store: Store) {}

  selectItem(id: number) {
    this.store.dispatch(selectItemById({ id }));
    this.store.select('selectedItem').subscribe(item => {
      this.selectedItem = item;
    });
  }
}