@ngrx/component-store v10.0.0版本.select方法重载及参数类型咨询

Hey there! Let's break down everything you need to know about the select method in @ngrx/component-store version 10.0.0, based on your questions.

Overload Forms Explained #

The select method has several handy overloads to fit different state selection needs:

1. Basic Slice Selection #

The simplest form you referenced:

.select(state => state.someSlice)

This takes a projection function that receives the full component store state object, and returns the specific slice or value you want to access. The method wraps this into an Observable that emits whenever the selected slice changes.

2. Multi-Input Derived State #

The overload you saw with multiple inputs:

.select(p1, p2, (p1, p2) => someFunction(p1, p2))

This lets you combine multiple data sources to create a derived state value. To answer your key question about p1 and p2: they don't have to be Observables. Here's what you can pass:

• Selector functions: Just like the basic slice selector (e.g., state => state.user). The component store automatically converts these into Observables under the hood, tracking changes to those specific state slices.
• Existing Observables: If you have an Observable from another source (like another selected state slice, or an external service Observable), you can pass that directly too.

The final projection function receives the resolved values from each input (not the Observables themselves) and returns your derived state. Here's a quick example:

// Using two selector functions
const selectUser = (state: ProfileState) => state.user;
const selectNotifications = (state: ProfileState) => state.notifications;

this.userWithUnreadCount$ = this.store.select(
  selectUser,
  selectNotifications,
  (user, notifications) => ({
    ...user,
    unreadCount: notifications.filter(n => !n.read).length
  })
);

// Mixing a selector function and external Observable
const externalTimezone$ = this.timezoneService.getUserTimezone();
this.userWithTimezone$ = this.store.select(
  selectUser,
  externalTimezone$,
  (user, timezone) => ({ ...user, timezone })
);

Official Documentation Insights for v10.0.0 #

Since you're on v10.0.0, here's the critical info from the versioned official docs:

• The select method is a core part of the ComponentStore class, focused on creating derived state Observables that react to state changes.
• It supports overloads for up to 8 input sources (each can be a selector function or Observable), with corresponding projection functions that take the resolved values from each input.
• All subscriptions created by select are automatically managed by the component store, so you don't need to handle manual unsubscriptions when using the async pipe in your templates.
• Selector functions passed to select are memoized in v10+, meaning the projection only recalculates when the specific state slices used in the selectors change—this helps optimize performance by avoiding unnecessary computations.

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker