angularngrx

How to keep ngrx DRY?


(DRY = Don't repeat yourself)

I've got two pieces of state. One deals with cars, and one with planes.

All the actions are copy and paste and change the action names.

All the effects are copy and paste and change the effect names and request URLs.

All the reducers are essentially copy and paste.

Is there any way to avoid this duplication in ngrx?


Solution

  • Of course there is, you could perfectly fine apply generics to states and effects. Actions are identified in your store by their type, so make sure you include that, and you're good to go.

    The sad result is that when using your actions, you need to add logic since

    store.dispatch(new Load('car'));
    

    Frankly is less nice and less typesafe then

    store.dispatch(new LoadCar());
    



    For effects, yes you could create a single effect which accepts multiple types:

    $loadCar = this.actions.pipe(
       ofType([VehicleActions.loadCar, VehicleActions.loadTruck]),
       this.applyLoadLogic
    )
    
    $loadTruck = this.actions.pipe(
       ofType(VehicleActions.loadTrailer),
       obs => this.applyLoadLogic(obs, false)
    )
    
    applyLoadLogic(in: Observable<Action>, canDrive: boolean = true): Observable<Action> {
       return in.pipe(
          map(action => this.doMagic(action.payload, canDrive))
       );
    }