Console log the state data when using ngrx for State Management in Angular

See also questions close to this topic

• The type 'void' can not be assigned to the type 'ObservableInput <Action>'

  I'm receiving the next type error when I'm trying to dispatch an observable of actions in my effect as shown below:

   @Effect()
      rideSummary$: Observable<Action> = this.actions$.pipe(
          ofType<GetRideSummary>(RideActionTypes.GetRideSummary),
          map(action => action.payload),
          switchMap(payload => {
              const { ride, passenger } = payload;
              const allPassengers = [...ride.passengers, passenger];
              this.store.dispatch(new SetLoading);
              return this.directionService.computeRideRouteSummary(ride, allPassengers)
              .then((summary: RideRouteSummary) => {
                  const updatedRoute = Geometry.newFromData({
                      type: Geometry.LINE_STRING,
                      coordinates: summary.route
                  });
  
                  const totalTime = summary.totalTime;
                  const arrivalTime = ride.type === Ride.TYPE_TOWORK ?
                      ride.hour :
                      ride.hour + summary.totalTime;
                  const departureTime = ride.type === Ride.TYPE_TOWORK ?
                      ride.hour - summary.totalTime :
                      ride.hour;
                 this.store.dispatch(new UnsetLoading);
                 return this.store.dispatch(new GetRideSummarySuccess({
                      updatedRoute,
                      totalTime,
                      arrivalTime,
                      departureTime
                  }));
                  }
              ).catch(error => {
                  this.store.dispatch(new UnsetLoading);
                  catchError(() => of(new HandleError(error)));
              });
          })
      );
  

  The type error says:

  Unable to assign an argument of type "(payload: {ride: Ride; passenger: Passenger;}) => void" to the type parameter "(value: {ride: Ride; passenger: Passenger;}, index: number) => ObservableInput <Action> ".
  The type 'void' can not be assigned to the type 'ObservableInput <Action>'.
  

  I'm not sure what is the problem with the code. Seems to be something related to the promise. Any help?
• Error in ngrx immediately after upgrading to Angular 7

  error TS2345: Argument of type '(source$: Observable<RootState>) => Observable<any>' is not assignable to parameter of type 'OperatorFunction<RootChildState, any>'

  Everything was working perfectly prior to the upgrade.

  What's causing this error ? How can I fix it ?
• catchError in resolver with ngrx, working until item already exists in state

  I have this resolver that upon navigating to a different page, has a productThroughStore$ observable that checks to see if a product with that id exists in the state and if it exists, it goes through to the race operator and uses it, but if it doesn't, it filters through and the productThroughService observable makes it to a switchMap that calls a method from a DataFetcher service which makes an HTTP request then stores that product in state upon success.

  When there's an error with the request, there's a catchError which re-throws the error to the race operator, which then dispatches an action to update an error flag in the state.

  Now this all works fine mostly, even when the user navigates to a page and the DataFetcher service throws an error, it catches the error and switches the error flag to true to reflect in the UI, and the user can try to navigate to a different page now, and as long as the code proceeds to the switchMap in the productThroughService observable, everything will work. When this doesn't work though is AFTER a previous route navigation that results in a catchError, and the user now tries to navigate to a different route where the product already exists in the state. It navigates to the route but nothing happens. Also, if the user then navigates to a route where the switchMap happens, it then works again.

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
      const productId: string = route.params['id'];
      const lang = this.langService.getLanguage();
      const URL = apiUrls.BASE_URL(this.originService.getOrigin()) + apiUrls.GET_PRODUCT_UNLOCALIZED(productId);
  
      this.productThroughStore$ = this.store.pipe(
        select(selectProductUnlocalizedById(productId)),
        first(product => !!product)
      );
  
      this.productThroughService$ = this.store.pipe(
        select(selectProductUnlocalizedById(productId)),
        filter(product => !product),
        switchMap(product => {
          return this.dataFetcher.fetch(URL, lang).pipe(
            tap(result => {
              this.result = result;
              this.store.dispatch(new ProductUnlocalizedDataLoaded(result));
            }),
            catchError((error) => {
              return throwError(error);
            })
          );
        })
      );
  
      return race(
        this.productThroughService$,
        this.productThroughStore$
      ).pipe(
        catchError(error => {
          this.store.dispatch(new ProductUnlocalizedDataError(error));
          return of(this.result);
        })
      );
    }
  
• Is it possible to do and rxjs filter on ngrx store?

  I have a store with values. What I want to do is filter the results without subscribing first.

  Here is an example of an rxjs observable filter:

  //emit (1,2,3,4,5)
  const source = from([1, 2, 3, 4, 5]);
  //filter out non-even numbers
  const example = source.pipe(filter(num => num % 2 === 0));
  //output: "Even number: 2", "Even number: 4"
  const subscribe = example.subscribe(val => console.log(`Even number: ${val}`));
  

  What I have is a store of users, How can I filter that store observable by id, before subscribing to get the results?

  this.users = this.store.select(fromUser.selectAll);
  this.store.dispatch(  new actions.Query() );
  
  //filter out non-even numbers
   const example = this.users.pipe(filter(user => user.id === 'x-someid'));
  
   const user = example.subscribe(user => console.log(user));
  

  I tried the above, but nothing logs out. No values, no errors.

  How can I get this done?
• Ionic 3 ngrx/store reducers not receiving dispatched actions only in production mode

  I have an Ionic 3 App that uses web sockets and redux using ngrx/store. At first all of my code is working fine in development mode. In both browsers and real device.

  But when I try to built it in production mode. The action is still dispatched but the reducers didn't receive the action that has been dispatched causing that the state of the application not being updated.

  Here is my code below of my reducers.

  import { Action } from '@ngrx/store';
  
  const UPDATE_AVATAR = '[Websokcet] New ORDER';
  type Type = UpdateAvatar
  
  export class UpdateAvatar implements Action {
    readonly type = UPDATE_AVATAR;
    constructor(public payload: any) { }
  }
  
  export function UpdateAvatarReducer(state: any, action: Type) {
    console.log('ACTION RECEIVED:', state, action)
    switch (action.type) {
      case UPDATE_AVATAR:
        return action.payload;
    }
  }
  

  and in my rootReducers

  import { UpdateAvatar, UpdateAvatarReducer } from './reducers/uploadAvatar';
  
  export function rootReducer () {
    return {
      reducers: {
        driverUpdateProfile: DriverUpdateProfileReducer,
      },
    }
  }
  

  and in my app.module.ts

  import { rootReducer } from '../store/websocket';
  
  // and in the **imports arrays**
  
  StoreModule.forRoot({
    ...rootReducer().reducers
  }),
  

  It works in development mode but it doesn't in production. Why?

  Appreciate if someone could help. Thanks in advance.