user of Angular 5 service in ngrx effect

Question

I am trying to use my auth service to obtain the user token then make http request with the token in my effect file, then send another action. But it keeps giving me this error on (action) => . I am new to effect and Angular so greatly appreciate the help!

Argument of type '(action: [Action, State]) => void' is not assignable to parameter of type '(value: [Action, State], index: number) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>'.

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/withLatestFrom';
import { HttpClient, HttpRequest } from '@angular/common/http';
import { Store, Action } from '@ngrx/store';
import { tap, mergeMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';

import * as PropertyActions from '../actions/property.actions';
//import { Recipe } from '../recipe.model';
import * as fromPropertyReducer from '../reducers/property.reducer';
import * as fromApp from '../store/app.reducer';
import { AuthService } from '../user/auth.service';


@Injectable()
export class PropertyEffects {

    constructor(
        private actions$: Actions,
        private httpClient: HttpClient,
        private store: Store<fromApp.AppState>,
        private authService: AuthService
    ){}

    @Effect()
    sendMessage(): void {
    // POST
        this.actions$//.pipe(
        .ofType(PropertyActions.FETCH_ALL_PROPERTIES)
        .withLatestFrom(this.store.select('propertyState'))
        .switchMap((action) => {

            this.authService.getAuthenticatedUser().getSession((err, session) => {
                if (err) {
                return;
                }

                const req = new HttpRequest('POST', 'https://yxalbf1t6l.execute-api.us-east-1.amazonaws.com/dev/todos', 
                    //state.properties, 
                    { "text": "Testing10", "checked": true, "properties": [{"c":6},{"b":7}] },
                    {reportProgress: true},
                );
                return this.httpClient.request(req)
            }).pipe(
                    // If successful, dispatch success action with result
                    map(data => {
                        console.log(`Success ${JSON.stringify(data)}, 0, 2)`);
                        //return { type: PropertyActions.OPEN_ALL_PROPERTIES, payload: data }
                        //return { type: 'LOGIN_SUCCESS', payload: data }
                        return new PropertyActions.OpenAllProperties(data)
                    })
            )
        })
}

Then my second question is I want to do insert the header like in http request but using httpclient. How to do this

this.http.post('https://API_ID.execute-api.REGION.amazonaws.com/dev/compare-yourself', data, {
        headers: new Headers({'Authorization': session.getIdToken().getJwtToken()})
      })

Latin Warrior Latin Warrior · Accepted Answer · 2018-03-12T03:24:35

You need to dispatch an action from your effects. So specifying a return of void is not a valid option unless you specifically instruct ngrx that you don't want to return an action.

From the documentation, "Observables decorated with the @Effect() decorator are expected to be a stream of actions to be dispatched. Pass { dispatch: false } to the decorator to prevent actions from being dispatched."

Please take a look at this example from the ngrx documentation.

class MyEffects {
  constructor(private actions$: Actions, private auth: AuthService) { }

  @Effect() login$: Observable<Action> = this.actions$
    .ofType('LOGIN')
    .switchMap(action =>
      this.auth.login(action.payload)
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res }))
        .catch(err => Observable.of({ type: 'LOGIN_FAILURE', payload: err }))
    );

  @Effect() logout(): Observable<Action> {
    return this.actions$
      .ofType('LOGOUT')
      .switchMap(() =>
        this.auth.logout()
          .map(res => ({ type: 'LOGOUT_SUCCESS', payload: res }))
          .catch(err => Observable.of({ type: 'LOGOUT_FAILURE', payload: err }))
      );
  }
}

user of Angular 5 service in ngrx effect

1 Answers