[Angular] How to get Store state in ngrx Effect

For example, what you want to do is navgiate from current item to next or previous item. 

In your component, you can dispatch action like this:

  next($event) {
    $event.preventDefault();
    this.store.dispatch(new skillAction.Next(this.key));
  }

 

So here is the action defination:

export const NEXT = '[Skill] Next';

export class Next implements Action {
  readonly type = NEXT;
  constructor(public payload: string) {}
}

As you can see, the payload is current key / id for the current item.

 

Now in the effect class, we can get current item's key from payload, we still need to know what is the next item's id in the collection.

Luckly we have selector function, which looks like this:

export const getNextSkill = createSelector(
  getCollectionSkillIds,
  getSelectedSkillId,
  (ids, selectedId) => getNext(selectedId, ids)
);

 

Ok, now, in the effect, we should be able to get all what we need:

import {Injectable} from '@angular/core';
import {Actions, Effect} from '@ngrx/effects';
import {Router} from '@angular/router';

import * as actions from '../actions/skill';
import * as fromSkill from '../reducers';

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/distinctUntilChanged';
import {Observable} from 'rxjs/Observable';
import {Action, Store} from '@ngrx/store';
import {SkillsService} from '../services/skills.service';
import {Skill} from '../models/skills';
import {of} from 'rxjs/observable/of';
import {fromPromise} from 'rxjs/observable/fromPromise';
import {MatSnackBar} from '@angular/material';

@Injectable()
export class SkillEffects {

  constructor(private skillsService: SkillsService,
              private actions$: Actions,
              private store: Store<fromSkill.State>,
              private router: Router,
              private snackBar: MatSnackBar) {
  }


  @Effect({dispatch: false})
  selectedSkill$: Observable<Action> = this.actions$
    .ofType(actions.SELECT)
    .do((action: actions.Select) =>
   this.router.navigateByUrl(`/dashboard/(skills/${action.payload}//aside:skills)`));

  @Effect()
  nextSkill$: Observable<Action> = this.actions$
    .ofType(actions.NEXT)
    .withLatestFrom(this.store.select(fromSkill.getNextSkill))
    .map(([action, next]) => new actions.Select(next));
}

The most important piece here is 'withLatestFrom', we can select our selector which return an Observable. Now we are able to acess the state and get just what we want from the state.

 

Notice here, in the end we map to a new action which is "SELECT" action, we want it to sync our URL bar with UI state. This is important for the applcation, we need to make sure that Router (URL) should be our single souce of turth, only when URL changed, then we can change our UI State, otherwise, there might be chacne, URL and UI are out of sync.