使用NgRX实体标准化Api响应

{
  "users": [
    { "id": 1, "name": "Alice", "email": "alice@example.com" },
    { "id": 2, "name": "Bob", "email": "bob@example.com" }
  ]
}

import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';

export interface User {
  id: number;
  name: string;
  email: string;
}

export interface UsersState extends EntityState<User> {}

export const usersAdapter: EntityAdapter<User> = createEntityAdapter<User>();

import { createReducer, on } from '@ngrx/store';
import { usersAdapter } from './users.adapter';
import { loadUsersSuccess } from './users.actions';

export const initialState: UsersState = usersAdapter.getInitialState();

const usersReducer = createReducer(
  initialState,
  on(loadUsersSuccess, (state, { users }) => usersAdapter.setAll(users, state))
);

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

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

export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { selectAllUsers } from './users.selectors';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">{{ user.name }} - {{ user.email }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private store: Store) {}

  ngOnInit() {
    this.users$ = this.store.select(selectAllUsers);
  }
}

import { createSelector } from '@ngrx/store';
import { UsersState } from './users.reducer';

export const selectUsersState = (state: any) => state.users;

export const selectAllUsers = createSelector(
  selectUsersState,
  (state: UsersState) => state.ids.map(id => state.entities[id])
);