CODEWITHSUNDEEP
angularngrxngrx-effects
jack_snipe
jack_snipe

Reputation: 129

Actions must have a type property error NgRx

I have simle effects class that have to get some data from Firebase and dispatch a new action. 

@Injectable()
export class TripsEffects {

     constructor(private actions$: Actions, private afAuth: AngularFireAuth ) {}

     @Effect()
     loadTrips$ = this.actions$.ofType(TripsActionsTypes.LOAD_TRIPS)
         .pipe(
             switchMap(() => {
                 return this.afAuth.authState.pipe(
                     map(user => new LoadTripsSuccess(user))
                 );
            })
         );
}

But I get error Actions must have a type property. When user logs in, they are redirected to Trips page and in Trips component i am dispatching an action to load trips. Here are my actions :

export enum TripsActionsTypes {
    LOAD_TRIPS = '[Trips] Load Trips',
    LoadTripsSuccess = '[Trips] Load Trips Success',
    LoadTripsFailure = '[Trips] Load Trips Failure'
}

export class  LoadTrips implements Action {
    type: TripsActionsTypes.LOAD_TRIPS;
}

export class  LoadTripsSuccess implements Action {
    type: TripsActionsTypes.LoadTripsSuccess;
    constructor(public payload: any) {}
}

export class  LoadTripsFailure implements Action {
    type: TripsActionsTypes.LoadTripsFailure;
    constructor(public payload: any) {}
}

Upvotes: 2

Views: 2408

Answers (1)

bygrace
bygrace

Reputation: 5988

I think that you need to change from type: ...; to type = ...; in your action definitions.

type: TripsActionsTypes.LOAD_TRIPS; means type property is of type TripsActionsTypes.LOAD_TRIPS

type = TripsActionsTypes.LOAD_TRIPS; means that type is instantiated to the value of TripsActionsTypes.LOAD_TRIPS.

So the type property on your actions is never being initialized. It is an easy mistake to make because the object literal syntax uses : for initialization (ex: { type: 'something' }) and typescript doesn't give you a transpilation error for it.

Upvotes: 12

Related Questions