import { Injectable } from '@angular/core'; import { Action, select, Store } from '@ngrx/store'; import { Actions, Effect, ofType, createEffect } from '@ngrx/effects'; import { tap, withLatestFrom } from 'rxjs/operators'; import { LocalStorageService } from '../../../core/core.module'; import { State } from '../examples.state'; import * as todoAction from './todos.actions'; import { selectTodosState } from './todos.selectors'; export const TODOS_KEY = 'EXAMPLES.TODOS'; @Injectable() export class TodosEffects { constructor( private actions$: Actions, private store: Store<State>, private localStorageService: LocalStorageService ) {} persistTodos = createEffect( () => this.actions$.pipe( ofType( todoAction.actionTodosAdd, todoAction.actionTodosFilter, todoAction.actionTodosRemoveDone, todoAction.actionTodosToggle ), withLatestFrom(this.store.pipe(select(selectTodosState))), tap(([action, todos]) => this.localStorageService.setItem(TODOS_KEY, todos) ) ), { dispatch: false } ); }