Angular-Redux状态获取：@select()在自定义服务中的使用咨询

Absolutely, using @select() in your CartService does work to get the latest state from your custom Redux store—here's how to make sure it's set up correctly and some best practices to follow:

1. Fix the @select() Type Declaration First #

The key thing to note: @select() doesn't return a plain array—it returns an Observable that emits the latest state whenever it updates. Your current code has a type mismatch:

// ❌ Incorrect: @select() returns an Observable, not a raw array
@select() private cartData: ICartItem[];

// ✅ Correct: Declare it as an Observable (using $ suffix is RxJS convention)
@select() private cartData$: Observable<ICartItem[]>;

2. Expose State to Components (Encapsulation Best Practice) #

Since cartData$ is private, add a public method to let components subscribe to the state stream. This keeps your service's internal implementation hidden:

@Injectable({ providedIn: 'root' })
export class CartService {
  @select() private cartData$: Observable<ICartItem[]>;

  constructor(private store: Store<IAppState>) {}

  // Public method to expose cart state
  getCartData(): Observable<ICartItem[]> {
    return this.cartData$;
  }

  // Your existing add/remove logic (dispatch actions to store)
  addToCart(item: ICartItem): void {
    this.store.dispatch(new AddCartItemAction(item));
  }

  removeFromCart(itemId: string): void {
    this.store.dispatch(new RemoveCartItemAction(itemId));
  }
}

3. How Components Consume the State #

Components can now use your service to get the latest cart data. The easiest way to manage subscriptions is Angular's async pipe (it auto-cleans up subscriptions to prevent memory leaks):

<!-- In component template -->
<div *ngFor="let item of cartService.getCartData() | async">
  {{ item.name }} - {{ item.quantity }}
</div>

Or if you need to work with the data in component logic:

// In component class
cartItems$: Observable<ICartItem[]>;

constructor(private cartService: CartService) {
  this.cartItems$ = this.cartService.getCartData();
}

4. Verify It's Working #

To confirm you're getting the latest state, add a quick log in your service (for testing only):

constructor(private store: Store<IAppState>) {
  this.cartData$.subscribe(updatedData => {
    console.log('Cart state updated:', updatedData);
  });
}

When you dispatch ADD or REMOVE actions, you should see the updated cart data logged immediately.

Why This Approach Is Great #

Centralizing all cart logic (state access + action dispatching) in CartService follows the single responsibility principle:

• Components don't need to know about the Redux store directly
• All cart-related code lives in one place, making it easier to debug and maintain
• You can add additional logic (like calculating total price) in the service without touching components

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