Search code examples
typescriptngrxngrx-effects

ngrx: How to call a reducer before and after an effect

I want to fix the following warning:ESLint: Calling 'store.dispatch' in 'Effect' is forbidden.

The effect in question does generally this:

  • lock data in the store using a reducer
  • update the backend data
  • unlock the data

Code:

    this.actions$.pipe(
              ofType(actions.update),
              switchMap(action => {
                this.store.dispatch(actions.lockData(action.data.id));
                return this.backendService.update$(action.data)
                 .pipe(
                    map(...),
                    catchError(...),
                    finalize(()=> this.store.dispatch(actions.unlockData(action.data.id))  
                    )

How to do it properly?

Solution

  • You can lock/unlock the data with the action that triggers the effect, and with the action that is returned from the effect.

    In your case this means actions.update, and the action returned in the map method.