Angular中使用ngrx/store高效关联应用状态与组件静态对象的问题

Hey there! I totally get the confusion when you're new to NgRx—separating static reference data from dynamic state and then combining them to feed your components can feel tricky at first. Let's walk through how to set this up efficiently, using your existing code as a starting point.

First, Let's Align Our Data Structure #

Your Item class holds static/metadata (like name and need—think of this as data you might load once from an API or config), while ItemState tracks dynamic user-driven values (like count). To make this scalable, we should store the dynamic state as a dictionary (key-value pair) where the key is the Item's id—this makes looking up state for a specific item fast.

Let's adjust your types first:

// items.ts
export class Item { 
  id: number; 
  name: string; 
  need: number; 
}

// Update ItemState to track only dynamic data per item
export interface ItemState {
  [itemId: number]: { count: number };
}

// Keep your action type, but let's make it more specific
export enum ItemActionTypes {
  UPDATE_COUNT = '[Item] Update Count'
}

export class UpdateItemCount implements Action {
  readonly type = ItemActionTypes.UPDATE_COUNT;
  constructor(public payload: { id: number; count: number }) {}
}

export type ItemStateActions = UpdateItemCount;

Refactor the Reducer #

Now the reducer will manage the dictionary of item counts. We'll initialize with an empty object, and handle updating counts by item id:

export function itemReducer(
  state: ItemState = {},
  action: ItemStateActions
): ItemState {
  switch (action.type) {
    case ItemActionTypes.UPDATE_COUNT:
      return {
        ...state,
        [action.payload.id]: { count: action.payload.count }
      };
    default:
      return state;
  }
}

The Magic: Use NgRx Selectors to Combine Data #

This is where we connect your static Item data with the dynamic state. Selectors are pure, memoized functions that let you derive exactly the data your component needs—no messy logic in the component itself.

First, assume you have your static Item list stored somewhere (maybe in a service, or even in another part of the store if it's loaded asynchronously). Let's create a selector that takes the static items and the item state, then returns combined items with their current count:

// items.selectors.ts
import { createSelector } from '@ngrx/store';
import { AppState } from './app.state'; // Your root state type

// Select the item state from the root store
export const selectItemState = (state: AppState) => state.items;

// Create a selector that combines static items with state
export const selectCombinedItems = (staticItems: Item[]) => 
  createSelector(
    selectItemState,
    (itemState) => {
      return staticItems.map(item => ({
        ...item,
        // Use the count from state if it exists, else fallback to 0
        count: itemState[item.id]?.count ?? 0
      }));
    }
  );

Use the Combined Data in Your Component #

Now in your component, you can inject the store, get your static items, and use the selector to get the ready-to-render data:

// item-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Item } from './items';
import { selectCombinedItems } from './items.selectors';
import { UpdateItemCount } from './items';

@Component({
  selector: 'app-item-list',
  template: `
    <div *ngFor="let item of combinedItems$ | async">
      <h3>{{ item.name }}</h3>
      <p>Need: {{ item.need }} | Current Count: {{ item.count }}</p>
      <button (click)="updateCount(item.id, item.count + 1)">+</button>
      <button (click)="updateCount(item.id, item.count - 1)">-</button>
    </div>
  `
})
export class ItemListComponent implements OnInit {
  combinedItems$: Observable<Item[]>;
  // Assume this is your static item data (could load from a service too)
  staticItems: Item[] = [
    { id: 1, name: 'Apple', need: 5 },
    { id: 2, name: 'Banana', need: 3 }
  ];

  constructor(private store: Store) {}

  ngOnInit() {
    // Initialize the selector with our static items
    this.combinedItems$ = this.store.select(selectCombinedItems(this.staticItems));
  }

  updateCount(id: number, newCount: number) {
    this.store.dispatch(new UpdateItemCount({ id, count: newCount }));
  }
}

Bonus: Scale with NgRx Entity #

If you're dealing with larger datasets, consider using NgRx Entity—it's built for managing collections of data, and it simplifies selectors, reducers, and CRUD operations. It would handle the dictionary structure for you, making your code even cleaner.

The core idea stays the same: keep static metadata separate from dynamic state, then use selectors to merge them into the data your components need.

内容的提问来源于stack exchange，提问作者tedski