如何在@ngrx/signals的signalStore中集成@ngrx/router-store处理路由参数

你完全可以将路由参数的监听逻辑直接封装到SignalStore内部，无需在组件中维护effect。SignalStore提供了withEffects工具函数，允许你在Store层面注册副作用逻辑，包括监听外部信号（比如路由参数信号）并触发数据获取。

实现步骤 #

1. 定义带状态和副作用的SignalStore #

在创建SignalStore时，通过withEffects注入路由参数信号，并创建effect监听其变化，自动触发数据请求：

import { signalStore, withState, withEffects, effect } from '@ngrx/signals';
import { selectRouteParam } from '@ngrx/router-store';
import { inject } from '@angular/core';
// 导入你的API服务或数据获取函数
import { fetchDataById } from './your-data-service';

// 定义Store状态结构
interface PageState {
  pageData: any | null;
  loading: boolean;
  error: string | null;
}

// 初始状态
const initialPageState: PageState = {
  pageData: null,
  loading: false,
  error: null,
};

export const PageSignalStore = signalStore(
  withState(initialPageState),
  withEffects((store) => {
    // 注入路由参数信号（'pageId'为你路由中定义的参数名）
    const pageIdSignal = selectRouteParam('pageId');

    // 创建effect监听pageId变化
    const loadPageData = effect(() => {
      const pageId = pageIdSignal();
      if (!pageId) return;

      // 更新加载状态
      store.loading.set(true);
      store.error.set(null);

      // 触发数据请求
      fetchDataById(pageId)
        .then((data) => {
          store.pageData.set(data);
          store.loading.set(false);
        })
        .catch((err) => {
          store.error.set(err.message);
          store.loading.set(false);
        });
    }, { allowSignalWrites: true });

    // 返回effect以便清理（可选，NgRx会自动处理）
    return { loadPageData };
  })
);

2. 组件中简化使用 #

此时组件只需注入Store，直接使用状态信号即可，无需维护任何路由相关的effect：

@Component({
  template: `
    <div *ngIf="store.loading()">加载中...</div>
    <div *ngIf="store.error()" class="error">{{ store.error() }}</div>
    <ng-container *ngIf="store.pageData()">
      <!-- 渲染页面数据 -->
    </ng-container>
  `
})
class MyComponent {
  readonly store = inject(PageSignalStore);
}

关键说明 #

• withEffects的作用：它允许你在Store内部定义副作用逻辑，访问Store的所有状态信号和更新函数，同时可以注入外部依赖（比如路由信号）。
• 路由信号的注入：selectRouteParam来自@ngrx/router-store，需要确保你已经在应用中正确配置了RouterStore（导入StoreRouterConnectingModule.forRoot()）。
• effect的自动运行：当Store被注入到组件时，内部的effect会自动启动，监听路由参数的变化，无需手动触发。

这种方式既实现了路由逻辑与组件的解耦，也将所有数据管理逻辑统一到SignalStore中，符合你的设计初衷。

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