如何在NgRx示例应用中实现URL搜索参数与搜索状态同步？

Great question! Integrating NgRx with route query params for search functionality is a common requirement, and there are a few best practices to follow to keep your implementation clean and aligned with NgRx's principles. Let's break down the correct approach step by step, covering both scenarios you mentioned: updating the URL on search, and hydrating the search state from the URL.

1. Core Setup: State, Actions, Reducer #

First, ensure your NgRx state tracks the search query (alongside books, loading state, etc.)—this keeps your input and results synced with a single source of truth.

State Definition #

export interface BooksState {
  searchQuery: string;
  books: Book[];
  loading: boolean;
  error: string | null;
}

const initialState: BooksState = {
  searchQuery: '',
  books: [],
  loading: false,
  error: null
};

Actions #

Define actions to trigger searches, handle success/failure:

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

export const searchBooks = createAction(
  '[Books] Search Books',
  props<{ query: string }>()
);

export const searchBooksSuccess = createAction(
  '[Books] Search Books Success',
  props<{ books: Book[] }>()
);

export const searchBooksFailure = createAction(
  '[Books] Search Books Failure',
  props<{ error: string }>()
);

Reducer #

Update the state when actions are dispatched:

import { createReducer, on } from '@ngrx/store';
import * as BooksActions from './books.actions';

export const booksReducer = createReducer(
  initialState,
  on(BooksActions.searchBooks, (state, { query }) => ({
    ...state,
    searchQuery: query,
    loading: true,
    error: null
  })),
  on(BooksActions.searchBooksSuccess, (state, { books }) => ({
    ...state,
    books,
    loading: false
  })),
  on(BooksActions.searchBooksFailure, (state, { error }) => ({
    ...state,
    error,
    loading: false
  }))
);

2. Scenario 1: Update URL When User Searches #

When the user types a query or submits the search, you need to:

• Dispatch the searchBooks action to update the store and fetch results
• Update the route's query params to reflect the current search query

Component Implementation #

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { distinctUntilChanged, map, tap } from 'rxjs/operators';
import * as BooksActions from './books.actions';
import { selectBooksList, selectBooksLoading, selectBooksSearchQuery } from './books.selectors';

@Component({
  selector: 'app-book-search',
  template: `
    <input 
      type="text" 
      [value]="searchQuery$ | async" 
      (input)="onSearch($event.target.value)" 
      placeholder="Search books..."
    >
    <div *ngIf="loading$ | async" class="loading">Loading books...</div>
    <ul *ngIf="books$ | async as books">
      <li *ngFor="let book of books" class="book-item">{{ book.title }}</li>
    </ul>
  `
})
export class BookSearchComponent implements OnInit {
  searchQuery$: Observable<string> = this.store.select(selectBooksSearchQuery);
  books$: Observable<Book[]> = this.store.select(selectBooksList);
  loading$: Observable<boolean> = this.store.select(selectBooksLoading);

  constructor(
    private store: Store,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  onSearch(query: string): void {
    // Dispatch action to update state and fetch results
    this.store.dispatch(BooksActions.searchBooks({ query }));
    
    // Update route query params (replaceUrl avoids cluttering history)
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: query ? { query } : {}, // Clear params if query is empty
      replaceUrl: true
    });
  }
}

Key notes here:

• Use replaceUrl: true to prevent adding duplicate entries to the browser history when the user types quickly
• Bind the input directly to the store's searchQuery state to keep it synced automatically

3. Scenario 2: Hydrate Search State From URL on Initial Load #

When the user opens a URL with a query param, you need to read that param and trigger the search automatically. You can handle this in either the component or an NgRx Effect (preferred for cleaner component code).

Option A: Component-Based Initialization #

Add this to the component's ngOnInit:

ngOnInit(): void {
  this.route.queryParams.pipe(
    map(params => params['query'] || ''),
    distinctUntilChanged(), // Avoid re-triggering if param doesn't change
    tap(query => {
      if (query) {
        this.store.dispatch(BooksActions.searchBooks({ query }));
      }
    })
  ).subscribe();
}

Option B: NgRx Effect (Recommended for Scalability) #

If you're using @ngrx/router-store, you can listen for route navigation actions in an effect to keep component logic minimal:

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { RouterNavigatedAction, ROUTER_NAVIGATED } from '@ngrx/router-store';
import { map, filter, distinctUntilChanged } from 'rxjs/operators';
import * as BooksActions from './books.actions';

@Injectable()
export class BooksEffects {
  loadBooksOnRouteQuery$ = createEffect(() => 
    this.actions$.pipe(
      ofType<RouterNavigatedAction>(ROUTER_NAVIGATED),
      map(action => action.payload.routerState.root.queryParams['query']),
      filter(query => !!query), // Only trigger if query exists
      distinctUntilChanged(),
      map(query => BooksActions.searchBooks({ query }))
    )
  );

  constructor(private actions$: Actions) {}
}

4. Critical Best Practices to Validate Your Implementation #

If your current solution works but you're unsure about its validity, check for these key points:

• Single Source of Truth: Is the search query stored in NgRx state, not just the component or route? This ensures consistency across your app.
• Avoid Duplicate Requests: Are you using distinctUntilChanged() to prevent re-fetching results for the same query?
• History Management: Does updating the query use replaceUrl: true to keep the browser history clean?
• Unidirectional Data Flow: Are all state changes triggered by actions, with no direct state mutations?

If your implementation checks these boxes, it's likely following NgRx best practices!

内容的提问来源于stack exchange，提问作者Marko Čepo