alex-okrushko

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { tap, switchMap} from 'rxjs/operators';
import { retryBackoff } from 'backoff-rxjs';
import { BackendService, HttpError } from './backend.service';

export const INIT_INTERVAL_MS = 100; // 100 ms
export const MAX_INTERVAL_MS = 20 * 1000; // 20 sec

@Component({

alex-okrushko

export const initialState: State = adapter.getInitialState({
  selectedBookId: null,
});

export const reducer = createReducer(
  initialState,
  on(
    BooksApiActions.searchSuccess,
    CollectionApiActions.loadBooksSuccess,
    (state, { books }) => adapter.addMany(books, state)

alex-okrushko

export const enum LoadingState {
    INIT = 'INIT',
    LOADING = 'LOADING',
    LOADED = 'LOADED',
}
export interface ErrorState {
    errorMsg: string;
}

export type CallState = LoadingState | ErrorState;

alex-okrushko

/** Action to log in the User from the Login Page */
export const login = createAction(
    '[Login Page] Login',
    // notice 👇 payload wrapping 
    props<{payload: {username: string; password: string;}}>(),
)

alex-okrushko

/** 
 * Action to log in the User from the Login Page.
 * Uses the most secure password by default.
 */
export const login = createAction(
    '[Login Page] Login',
    (username: string, password = 'p@ssw0rdLol') => ({username, password}),
);

alex-okrushko

export class MyEffects {
  constructor(private readonly actions$: Actions) {}
  
  @Effect
  login$ = this.actions$.pipe(
    ofType(login), // provide type safety *without* ActionsUnion
    ...
  )
}

alex-okrushko

export class MyEffects {
  constructor(private readonly actions$: Actions<ActionsUnion>) {}
  
  @Effect
  login$ = this.actions$.pipe(
    // ensures type safety only when ActionsUnion is provided
    ofType(login.type), 
    ...
  )
  

alex-okrushko

function reducer(state, action) {
  switch(action.type) {
    case login.type: { // <----- usage in reducer
    ...
    }
  }
}


@Effect

alex-okrushko

login({username: 'Tim', password: 'NgRx'})

alex-okrushko

/** Action to log in the User from the Login Page */
export const login = createAction(
    '[Login Page] Login',
    props<{username: string; password: string;}>(),
)