如何动态注册ngrx效果?

时间:2020-04-17 14:11:22

标签: angular ngrx ngrx-effects

快速

我正在尝试动态创建ngrx效果。

我要完成的任务:

我希望能够在我的ngrx存储中调度动作,然后决定动作成功或失败时该怎么做。

我目前的操作方式:

我的商店中有3个动作。 LOAD_DOCUMENTLOAD_DOCUMENT_SUCCESSLOAD_DOCUMENT_FAILURE。目前,我正在尝试根据Observable创建一个Actions,以监听LOAD_DOCUMENT_SUCCESSLOAD_DOCUMENT_FAILURE。调度它们中的任何一个时,它将调用processPostAction()方法。一旦Observable准备就绪,我将调用LOAD_DOCUMENT Action。

这是我的实现方式:

@Injectable()
export class DispatchHandlerProcessor<STORE_STATE> {

  actions$: Observable<Action>[] = [];

  constructor(
    private _store: Store<STORE_STATE>,
    private _dispatchedActions: Actions
  ) { } 

  process<SUCC extends Action, FAIL extends Action>(handler: DispatchHandler<SUCC, FAIL>): void {
    const postActionProcessor$: Observable<Action>
      = this._dispatchedActions.pipe(
        ofType(handler.successType, handler.failureType), // Either LOAD_DOCUMENT_SUCCESS or LOAD_DOCUMENT_FAILURE
        tap((action: SUCC | FAIL) => {
          handler.processPostAction(action); // method executed after LOAD_DOCUMENT
      })
    );
    this.actions$.push(postActionProcessor$);
    this._store.dispatch(handler.actionToDispatch); // call LOAD_DOCUMENT
  }

}

当前行为:

当前:

  • 调用process()方法。
  • 为此效果创建一个Observable,并将其添加到数组中。
  • 调用LOAD_DOCUMENT操作并以LOAD_DOCUMENT_SUCCESS
  • 结尾
  • process(...)方法中创建的效果从未调用
  • 所以我想:效果未注册(如here所述)

我的问题:

如何动态注册我的效果?有没有更好的方法来实现我要实现的模式?

小注释::actions数组将不断增长并造成内存问题。目前,要使其正常工作只是一个小技巧。理想情况下,我想注册效果而不是使用此数组。

我还意识到@Effect关键字没有放在任何地方。将其放置在第12行时出现错误Decorators are not valid here

我“正常”创建的所有效果都运行良好。

1 个答案:

答案 0 :(得分:1)

实际上,我是通过订阅Actions来解决的。

代码如下:

@Injectable()
export class DispatchHandlerProcessor<STORE_STATE> {

  constructor(
    private _store: Store<STORE_STATE>,
    private _dispatchedActions: Actions
  ) { } 

  process<SUCC extends Action, FAIL extends Action>(handler: DispatchHandler<SUCC, FAIL>): void {
    const subscription: Subscription = this._dispatchedActions.subscribe(action => {
      if(action.type == handler.successType || action.type == handler.failureType) {
        handler.processPostAction(<SUCC | FAIL>action);
        subscription.unsubscribe();
      }
    });
    this._store.dispatch(handler.actionToDispatch);
  }
}

如果有人知道答案,我仍然对如何动态注册@Effect感兴趣!