👂 Прослушивание действий в @ ngrx / store 👂

Эта проблема

Вам нужно запустить некоторый код после того, как было запущено определенное действие.

Например, вы хотите сбросить форму после того, как было запущено действие ADD_STORY_SUCCESS.

Решения

🤖 Добавить новый ключ

Добавьте еще один ключ к своему состоянию.

{
  isSuccess: boolean
}

Затем вы можете прослушать такие изменения:

this.store.select(state => state.story.isSuccess)
         .filter(v => !!v)
         .subscribe(() => this.form.reset())

Мне не нравится это решение, потому что мне приходится поддерживать еще key в моем магазине и каждый раз беспокоиться о его сбросе.

🙄 Подпишитесь на Effect

Если вы работаете с ngrx/effects, вы можете вставить effect в свой компонент и подписаться на него.

Например:

@Effect() addStory$ = this.actions$
  .ofType('ADD_STORY')
  .switchMap(action => this.storyService.add(action.payload)
    .map(story => ({
      type: 'ADD_STORY_SUCCESS'
    }))
  )

Затем в вашем компоненте:

constructor( private storyEffects : StoryEffects) {}
storyEffects.addStory$
        .filter(action => action.type === 'ADD_STORY_SUCCESS')
        .subscribe(res => this.form.reset());

При таком подходе возникают две дилеммы:

1. Может у вас не работает ngrx/effects.

2. Вам необходимо использовать оператор share. В противном случае у вас будет две подписки. (т.е. в данном случае два HTTP-вызова)

@Effect() addStory$ = this.actions$
  .ofType('ADD_STORY')
  .switchMap(action => this.postsService.add(action.payload)
    .map(story => ({
      type: 'ADD_STORY_SUCCESS'
    }))
  ).share()

💪 Подпишитесь на Диспетчер

Вы можете этого не знать, но каждое действие проходит через службу под названием Dispatcher. Диспетчер - это Subject, что означает, что его можно наблюдать.

Если мы хотим получать уведомления при запуске действий, мы можем подписаться на Dispatcher в нашем компоненте.

constructor(private dispatcher: Dispatcher) {}
dispatcher.filter(action => action.type === 'ADD_STORY_SUCCESS')
          .subscribe(() => this.form.reset())

Я сделал шаг вперед и создал более удобный синтаксис.

@Injectable()
export class AppActions {
  _actions = new Subject<Action>();

  ofType( type : string ) {
    return this._actions.filter(( action : Action )
       => action.type === type);
  }

  nextAction( action : Action ) {
    this._actions.next(action);
  }

}

@Injectable()
export class MyDispacther extends Dispatcher {
  constructor( private actions: AppActions ) {
    super();
  }

  next( action: Action ) {
    super.next(action);
    this.actions.nextAction(action);
  }
}

Я расширяю исходный Dispatcher и использую новый Subject, чтобы создать немного более чистый синтаксис.

Нам также нужно указать Angular использовать наш Dispatcher вместо оригинала.

providers: [{ provide: Dispatcher, useClass: MyDispacther }]

Теперь в нашем компоненте мы можем написать следующий код:

constructor( private actions : AppActions) {}
actions.ofType('ADD_STORY_SUCCESS')
       .subscribe(() => this.form.reset())

В следующей статье мы увидим, как это может нам помочь, когда я расскажу о подключении ваших форм к ngrx/store.

Ngrx-генератор

По этому поводу я хотел бы представить вам новый инструмент, над которым я работал в последнее время, который избавит вас от головной боли, связанной со всем шаблоном Redux.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Vue и JS!