独立组件中无需路由配置创建NGRX Feature State切片方法咨询

当然可以，Angular独立API提供了直接注册NGRX Feature State和Effects的方式，完全不需要依赖NgModule或路由配置。以下是具体实现方案：

1. 注册Feature Reducer #

使用provideStore函数（来自@ngrx/store），通过传入键值对形式的配置来注册Feature切片，替代原StoreModule.forFeature的功能。

组件内按需注册 #

如果该Feature仅在特定组件树中使用，直接在独立组件的providers数组中配置：

import { Component } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { reducerFunction } from './some-feature.reducer';

@Component({
  selector: 'app-some-feature',
  template: `<!-- 组件模板内容 -->`,
  standalone: true,
  providers: [
    provideStore({
      someFeatureName: reducerFunction
    })
  ]
})
export class SomeFeatureComponent { }

全局注册（应用启动时） #

如果Feature是全局通用的，可在bootstrapApplication中配置，确保应用启动时切片就已加载：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { AppComponent } from './app/app.component';
import { reducerFunction } from './app/some-feature.reducer';

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({
      someFeatureName: reducerFunction
    })
  ]
});

2. 注册Feature Effects #

使用provideEffects函数（来自@ngrx/effects），直接传入Feature Effects类，替代原EffectsModule.forFeature的功能。

与Reducer一起在组件内注册 #

import { Component } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { reducerFunction } from './some-feature.reducer';
import { SomeFeatureEffect } from './some-feature.effect';

@Component({
  selector: 'app-some-feature',
  template: `<!-- 组件模板内容 -->`,
  standalone: true,
  providers: [
    provideStore({
      someFeatureName: reducerFunction
    }),
    provideEffects(SomeFeatureEffect)
  ]
})
export class SomeFeatureComponent { }

全局注册Effects #

同样支持在应用启动时全局注册多个Feature Effects：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { AppComponent } from './app/app.component';
import { reducerFunction } from './app/some-feature.reducer';
import { SomeFeatureEffect } from './app/some-feature.effect';

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({
      someFeatureName: reducerFunction
    }),
    provideEffects([SomeFeatureEffect])
  ]
});

关键注意点 #

• 组件内注册的Feature State和Effects仅在该组件及其子组件的注入树中可用，实现了按需加载的效果。
• provideStore支持同时注册多个Feature切片，只需在配置对象中添加更多键值对即可。
• provideEffects既接受单个Effect类，也支持传入类数组批量注册。

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