NGXS中基于Observable输出自动分发Action的优化方案问询

针对你不想显式订阅Observable、希望由NGXS自动处理订阅并分发Action的需求，以下是几种实用的实现方式：

1. 自定义RxJS操作符（最贴近你想要的语法） #

你可以封装一个自定义RxJS操作符，内部自动完成订阅、Action分发和订阅管理，完全匹配你期望的fromSource(...).dispatch(...)写法：

import { Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Store } from '@ngxs/store';

// 扩展Observable类型，添加dispatch方法
declare module 'rxjs' {
  interface Observable<T> {
    dispatch: <A>(actionFactory: (value: T) => A) => Subscription;
  }
}

// 实现自定义操作符
export function setupDispatchOperator(store: Store): void {
  Observable.prototype.dispatch = function <A>(actionFactory: (value: any) => A): Subscription {
    return this.pipe(
      tap(value => store.dispatch(actionFactory(value)))
    ).subscribe();
  };
}

使用方式： #

1. 在懒加载模块的服务中初始化操作符：

import { Injectable } from '@angular/core';
import { Store } from '@ngxs/store';
import { setupDispatchOperator } from './dispatch-operator';
import { interval } from 'rxjs';
import { SomeAction } from './actions';

@Injectable()
export class LazyFeatureService {
  constructor(private store: Store) {
    // 初始化自定义操作符
    setupDispatchOperator(store);
  }

  startPeriodicAction() {
    // 直接使用目标语法
    interval(1000).dispatch(val => new SomeAction(val));
  }
}

2. 如需取消订阅，可保存返回的Subscription对象，在服务销毁或组件ngOnDestroy钩子中调用unsubscribe()。

2. 在NGXS状态类中集成外部Observable源 #

如果周期性数据源和状态逻辑强相关，可以直接在状态类中处理，借助NGXS的生命周期管理订阅：

import { State, Action, StateContext } from '@ngxs/store';
import { interval, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { SomeAction, StateDestroyed } from './actions';

@State({
  name: 'lazyFeature',
  defaults: {}
})
export class LazyFeatureState {
  private subscription: Subscription;

  constructor(private store: Store) {
    // 状态初始化时自动订阅并分发Action
    this.subscription = interval(1000).pipe(
      tap(val => store.dispatch(new SomeAction(val)))
    ).subscribe();
  }

  // 状态销毁时取消订阅（需自定义StateDestroyed Action，在模块销毁时触发）
  @Action(StateDestroyed)
  onDestroy(ctx: StateContext<any>) {
    this.subscription?.unsubscribe();
  }
}

这种方式将订阅逻辑与状态管理绑定，由NGXS间接管理订阅生命周期，无需在服务或组件中显式处理。

3. 结合Angular AsyncPipe（组件场景适用） #

如果Observable在组件中使用，可借助AsyncPipe自动管理订阅，同时通过tap操作符分发Action：

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Store } from '@ngxs/store';
import { SomeAction } from './actions';

@Component({
  template: `<div>{{ periodic$ | async }}</div>`
})
export class LazyFeatureComponent {
  periodic$ = interval(1000).pipe(
    tap(val => this.store.dispatch(new SomeAction(val)))
  );

  constructor(private store: Store) {}
}

AsyncPipe会自动完成订阅和取消订阅，你只需在数据流中通过tap触发Action，无需手动调用subscribe()。

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