export const addWallpaperToFavorites = createAction(
  ADD_WALLPAPER_TO_FAVORITES,
  props<{ paper: IWallpaper }>()
);

export const reducer = createReducer(
  initialState,
  on(WallpaperActions.addWallpaperToFavorites, (state, { paper }) => ({
    ...state,
    favorites: [
      paper,
      ...state.favorites.filter((fav: IWallpaper) => fav.id !== paper.id )
      ]
    })
  ),
    // .... next 
);

public addToFavorites(paper: IWallpaper): void {
  this.store.dispatch(addWallpaperToFavorites({ paper }));
}

@Injectable()
export class WallpapersEffects {
  loadRecent$ = createEffect(() =>
    this.actions$.pipe(
      ofType(GET_RECENT_WALLPAPERS), // Action Pipe
      concatMap(() => concat(
        of(WallpaperActions.recentLoading()), // Dispatch Action Run loader
        this.unsplashApi.getLast15() // Common httpClient api service
          .pipe(
            switchMap(recent => [
              WallpaperActions.loadRecentSuccess({ recent }), // Dispatch Action when contentvloaded 
            ]),
            catchError(() => EMPTY) // Error Handle
          )))
    )
  );

  constructor(private actions$: Actions, private unsplashApi: UnsplashApiService) {}
}

 this.store.dispatch({type: GET_RECENT_WALLPAPERS});