title: Angular NgRx - is it bad practice to use store.dispatch in an effect?
body: <p>This question is an extension from <a href="https://stackoverflow.com/questions/58426291/angular-ngrx-effect-to-continue-polling-a-service-only-called-the-first-time">this ongoing post</a>, but I feel it is narrower in scope and I may be able to get an answer independently to the linked post.</p>
  
  <p><strong>Background</strong></p>
  
  <p>In the linked post, I am trying to poll a service to get data (where my problem is turing the polling on and off). In my real world app, the call is actually a little more complicated. What I want to do is some optional http <code>POSTs, and then a GET, always after my</code>POSTS` have returned (so I Know the server has processed the POSTed data, and will be included in my next GET results.</p>
  
  <p>If I do a <code>POST</code>, I also want to dispatch an action so I can update my state indicating the POST has occurred.</p>
  
  <p>I have converted some of the observables to promises, as I just find async/await easier to understand than lots of observables switch/mapping etc - I know this is probably not very pure, but perhaps one day my <code>rx/js</code> operator knowledge will improve (I can only hope). Maybe someone can show my better alternative... (but this is not the main question)</p>
  
  <p><strong>Actual Question</strong></p>
  
  <p>I have the following code <strong>effect code</strong>, that does NOT dispatch of is't own actions (these will be done in <code>this.syncData</code>) ....</p>
  
  <pre><code>    public startPolling$ = createEffect(() =&gt; this.actions$.pipe(
          ofType(myActions.startPolling),    
          tap(_ =&gt; this.logger.info('effect start polling')),
          tap(() =&gt; this.isPollingActive = true),
          switchMap(_ =&gt; this.syncData())
        ), { dispatch: false });
  </code></pre>
  
  <p>And then the helper method is...</p>
  
  <pre><code>    private syncData(): Observable&lt;Action&gt; {        
          const result$: Observable&lt;Action&gt; = Observable.create(async subscriber =&gt; {
            try {             
              const pendingEdits = await this.store$.select(fromData.getPendingEditedData).pipe(take(1)).toPromise()
              const pendingNewData = await this.store$.select(fromData.getNewData).pipe(take(1)).toPromise();
  
              // First post any local updates. These both block, so once they finish we can get the server data knowing any posted
              // data will be included
              if (pendingEdits.length &gt; 0) {
                await this.dataService.postPendinEdits(pendingEdits).toPromise();
                this.store$.dispatch(myActions.editSuccess());
              }
  
              if (pendingNewData.length &gt; 0) {
                await this.dataService.postPendingNewData(pendingNewData).toPromise();
                this.store$.dispatch(myActions.addNewDataSuccess());
              }
  
              const dataResult$ = this.dataService.getAllData().pipe(          
                tap(data =&gt; {
                  this.previousResultsTimeUtc = data.previousResultsTimeUtc;
                  if (data.currentDay) {
                    this.store$.dispatch(myActions.getCurrentDaySuccess(data.currentDay));
                    this.store$.dispatch(myActions.getDataSuccess(data));               
                  } else {              
                    this.store$.dispatch((myActions.getDataSuccess(data));               
                  }
                }),          
                catchError(err =&gt; of(myActions.getDataFail(err)))
              );
              const subs2 = dataResult$.subscribe(ss =&gt; {
                subs2.unsubscribe();
                subscriber.next(ss);
              });        
            } catch (error) {
              subscriber.error(error);
            }      
          })
  
          return result$;
        }  
  </code></pre>
  
  <p>So, we can see in the helper method, I get bits of store state, as well as <strong>dispatch actions</strong>. Also, in my app, I have another <code>continuePolling</code> effect where I also want to call the same code in <code>syncData()</code>.</p>
  
  <p>The main question is, <strong>is it a bad idea to dispatch these actions using <code>this.store$.dispatch</code> as oppose to just returning multiple actions from the effect?</strong> </p>
  
  <p>Does using the <code>this.store$.dispatch</code> cause more of the selects to "fire" (hence more UI updating) where if I returned them all from the effect, this would first process all actions in the reducers before UI updates occur via <code>selects</code>?</p>