Return empty action or observable in effect (angular redux/ngrx)

ngrx effects listen to multiple actions
ngrx 8 effects
ngrx withlatestfrom
property oftype does not exist on type actions<action
ngrx example
install @ngrx/effects
angular side effects
ngrx/effects module for feature

I'm uploading a file to server and I would like to track upload progress without spamming with many actions (on each http event). Is it possible to return something like null or empty observable in some cases? Because I want to dispatch an action only in two cases - success or failure. And now I must return an action in each http event type and it's becoming a spam then..

@Effect()
public createMediaItem: Observable<Action> = this._actions
    .pipe(
        ofType(MediaItemActionTypes.MediaItemCreateAction),
        map((action: MediaItemCreateAction) => action),
        switchMap(action => {
            return this._uploadService.createMediaItem(action.formData)
                .pipe(
                    map((event: HttpEvent<HttpEventType>) => {
                        switch (event.type) {
                            case HttpEventType.UploadProgress: {
                                console.log('ignore');
                                action.fileItem.progress = Math.round(event.loaded / event.total * 100);
                                break;
                                // return;
                            }

                            case HttpEventType.Response: {
                                return new MediaItemCreateSuccessAction();
                            }
                            default:
                                break;
                            // return;
                        }
                    })
                );
        })
    );

Use Rx.Observable.empty:

To return an empty action, you can use the empty observable from RxJS.

empty(scheduler: Scheduler): Observable

Creates an Observable that emits no items to the Observer and immediately emits a complete notification.

var result = Rx.Observable.empty();
result.subscribe(x => console.log(x));

NgRx, In a service-based Angular application, components are responsible for Effects are long-running services that listen to an observable of every action to a new action on success, and currently returns an empty observable if an error occurs. Here, you can see that in action, Delete_Item is our action name and 123 is an action data. How to Configure ngRx. ngRx is an angular version of the redux pattern, which is inspired by the group

So, my solution is below. I decided not to dispatch an action straightly from effect, for that matter I use store to dispatch the action only when I need.

@Effect({ dispatch: false })
public createMediaItem: Observable<void> = this._actions
    .pipe(
        ofType(MediaItemActionTypes.MediaItemCreateAction),
        map((action: MediaItemCreateAction) => action),
        mergeMap(action => {
            return this._uploadService.createMediaItem(action.formData)
                .pipe(
                    map((event: HttpEvent<HttpEventType>) => {
                        switch (event.type) {
                            case HttpEventType.UploadProgress: {
                                action.fileItem.progress = Math.round(event.loaded / event.total * 100);
                                break;
                            }

                            case HttpEventType.Response: {
                                this._store.dispatch(new MediaItemCreateSuccessAction(action.fileItem, event.body));
                                break;
                            }

                            default:
                                break;
                        }
                    }),
                    catchError(error => of(this._store.dispatch(new MediaItemCreateFailAction(action.fileItem, error))))
                );
        })
    );

How to dispatch an empty action? - angular - html, I am using ngrx/effects. isNotFunny) { return of(new CryInMySleepAction()); } else { return EMPTY; } }), ); constructor( private _actions$: Actions, ) { } } #Effect​({ dispatch: false }) logThisEffect$: Observable<void> = this.actions$ . actions/​jokes-action'; import { ofType } from 'redux-observable'; import { of, concat } from  It is not to be confused with switchMap’s effects which keep the Observable open, and should be used with care, as it will cause NgRx effects to stop working when simply used in a pipe on an effect.

The only solution that i found is returning an NeverObservable().

Rxjs 5.x.x Usage:

import {NeverObservable} from 'rxjs/observable/NeverObservable';
return NeverObservable.create();

The NeverObservable will just stop the effect directly without expecting a return of Observable

How To Create An Ngrx @Effect That Doesn't Return An Action, Yep, another blog post about Angular 2 and Ngrx. In this post we'll Then when it's finished it returns an observable to an action of type our function has to return an Observable; it can't just return nothing. Redux / Ngrx Effects are an RxJS powered side effect model for Store. Effects use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages and time-based events.

redux-observable/redux-observable, This means we'll be returning some sort of empty action { type: '' } just to be im coming from an Angular background and in their redux library, ngrx, (though in their lingo they're effects, not epics). and in that decorator, you  Ngrx/effects is middleware for handling side effects in ngrx/store. It listens for dispatched actions in an observable stream, performs side effects, and returns new actions either immediately or

Stop using ngrx/effects for that - Michael Pearson, Ngrx/store is an Angular library that helps to contain the complexity of actions in an observable stream, performs side effects, and returns new The returned actions get passed along to the reducer. When the second component initializes, nothing additional will My Awesome React/Redux Structure. The @ngrx/effects library provides a way to isolate side effects into its own model, outside the NgRx store and the Angular components. It provides us an Observable actions which is basically a stream of all the dispatched actions, for every dispatched action it emits a new value (after every reducer has been called).

Using NgRx Effects for Data Loading in an Ionic & Angular Application, In this tutorial, we will investigate how to use NgRx Effects to create a data loading with state management solutions like Redux and NgRx is to dispatch actions which createNote(title): void { let id = Math.random() . that will return our HTTP request to load the data as an Observable, which can then be  Building Side Effects in NGRX This is the third article of a series that aims to explain in detail a step-by-step approach to building an Angular application with NGRX. In the first article of this series , I wrote a small overview of all the concepts surrounding the NGRX platform.

Comments
  • You can't track an upload progress without HTTP events. for the first & last events, I would suggest handling it in the HTTP call directly, with tap and finalize, which would trigger at request creation and at request ending.
  • Thank you! I would've probably used this solution, but I found another workaround in the meantime. I will post it as another answer.
  • return empty will not trigger the store.selects which are triggered by the effect?
  • No, this solution fits best for newest ngrx versions as well as { dispatch: false }. Depends on the specificity of effect.