Search code examples
angulartypescriptreduxrxjsngrx

Service in @Effect() isn't called


I have a situation wherein the effect is called but the underlying service isn't accessed. What's causing it?

user.effect.ts

@Effect()
getData$ = this.actions$.pipe(
    ofType(UserActions.getData),
    switchMap(() =>
        this.userService.getUserById(localStorage.getItem("uid")).pipe(
            map((data: IUser) => {
                if (data) {
                    return UserActions.dataReceived({
                        payload: UserService.parseData(data)
                    });
                } else {
                    return UserActions.dataNotReceived();
                }
            }),
            catchError(err =>
                of(
                    AuthActions.signOutError({
                        errorMessage: err.message,
                        errorCode: err.code
                    })
                )
            )
        )
    )
);

user.service.ts

getUserById(id) {
    this.logger.debug(`Getting user ${id}`);
    return this.afs
        .collection("users")
        .doc(id)
        .snapshotChanges()
        .pipe(
            map(action => {
                const data = action.payload.data();
                const uid = action.payload.id;
                return { uid, ...data };
            })
        );
}

Solution

  • You should use return new not return. Like this

                if (data) {
                    return new UserActions.dataReceived({
                        payload: UserService.parseData(data)
                    });
                } else {
                    return new UserActions.dataNotReceived();
                }