Component Store

import { ComponentStore } from '@ngrx/component-store';
import { tapResponse } from '@ngrx/operators';
import { Injectable } from '@angular/core';

interface PaginationState {
  items: Product[];
  currentPage: number;
  totalPages: number;
  loading: boolean;
  error: string | null;
}

@Injectable()  // NOT providedIn: 'root' — scoped to component
export class ProductListStore extends ComponentStore<PaginationState> {
  constructor(private productService: ProductService) {
    super({ items: [], currentPage: 1, totalPages: 0, loading: false, error: null });
  }

  // Selectors
  readonly items$ = this.select(state => state.items);
  readonly loading$ = this.select(state => state.loading);
  readonly vm$ = this.select(
    this.items$, this.loading$,
    (items, loading) => ({ items, loading }),  // derived ViewModel
  );

  // Updaters (synchronous state mutations)
  readonly setPage = this.updater((state, page: number) => ({
    ...state, currentPage: page,
  }));

  // Effects (async operations)
  readonly loadProducts = this.effect<number>(page$ =>
    page$.pipe(
      switchMap(page =>
        this.productService.getPage(page).pipe(
          tapResponse(
            response => this.patchState({
              items: response.items,
              totalPages: response.totalPages,
              loading: false,
            }),
            err => this.patchState({ error: err.message, loading: false }),
          ),
        )
      ),
    )
  );
}

// Component
@Component({
  selector: 'app-product-list',
  template: `
    @if (vm$ | async; as vm) {
      @for (item of vm.items; track item.id) {
        <app-product-card [product]="item" />
      }
    }
  `,
  providers: [ProductListStore],  // scoped instance
  standalone: true,
})
export class ProductListComponent {
  vm$ = inject(ProductListStore).vm$;
}

// Setup:
bootstrapApplication(AppComponent, {
  providers: [
    provideStore({ router: routerReducer }),
    provideRouterStore({
      serializer: DefaultRouterStateSerializer,
    }),
  ],
});

// Or custom serializer for only what you need:
import { MinimalRouterStateSerializer } from '@ngrx/router-store';
provideRouterStore({ serializer: MinimalRouterStateSerializer })

// Selectors:
import { getRouterSelectors } from '@ngrx/router-store';

export const {
  selectCurrentRoute,
  selectFragment,
  selectQueryParams,
  selectQueryParam,
  selectRouteParams,
  selectRouteParam,
  selectRouteData,
  selectUrl,
  selectTitle,
} = getRouterSelectors();

// Usage in a selector:
export const selectProductId = selectRouteParam('id');

export const selectCurrentProduct = createSelector(
  selectProductId,
  selectProductEntities,
  (id, entities) => id ? entities[id] : null
);

// Usage in component:
currentUrl$ = this.store.select(selectUrl);
productId$ = this.store.select(selectProductId);

import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { cold, hot } from 'jest-marbles';  // or jasmine-marbles

describe('UsersEffects', () => {
  let effects: UsersEffects;
  let actions$: Observable<Action>;
  let userService: jest.Mocked<UserService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        UsersEffects,
        provideMockActions(() => actions$),
        provideMockStore({ initialState: { users: [] } }),
        {
          provide: UserService,
          useValue: { getUsers: jest.fn() },
        },
      ],
    });

    effects = TestBed.inject(UsersEffects);
    userService = TestBed.inject(UserService) as jest.Mocked<UserService>;
  });

  it('should dispatch loadUsersSuccess on successful API call', () => {
    const users: User[] = [{ id: '1', name: 'Alice' }];

    // Use marble testing for cold/hot Observables:
    actions$ = hot('-a', { a: loadUsers() });
    userService.getUsers.mockReturnValue(cold('-b|', { b: users }));

    expect(effects.loadUsers$).toBeObservable(
      hot('--c', { c: loadUsersSuccess({ users }) })
    );
  });

  it('should dispatch loadUsersFailure on API error', () => {
    actions$ = hot('-a', { a: loadUsers() });
    userService.getUsers.mockReturnValue(cold('-#', {}, new Error('Network Error')));

    expect(effects.loadUsers$).toBeObservable(
      hot('--c', { c: loadUsersFailure({ error: 'Network Error' }) })
    );
  });
});