alex-okrushko

@Effect()
handleAddCommentError: Observable<Action> = this.actions.pipe(
    ofType(actions.ADD_COMMENT_ERROR),
    map(({payload}) => new actions.ShowAddCommentDialog(payload)),
);

alex-okrushko

@Component({
  selector: 'app-movies-page',
  template: `
    <h1>Movies Page</h1>
    <div *ngIf="error$ | async as error">
      {{ error }}
    </div>
    <button (click)="reload()">Refresh List</button>
  `
})

alex-okrushko

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

export type CallState = LoadingState | ErrorState;

alex-okrushko

// Dispatch is set to false, so this effect will not try to dispatch
// the result of this effect.
@Effect({ dispatch: false })
handleFetchError: Observable<unknown> = this.actions$.pipe(
  ofType(actions.FETCH_PRODUCTS_ERROR),
  map(() => {
    // Setting the timeout, so that angular would re-run change detection.
    setTimeout(
      () =>
        this.snackBar.open('Error fetching products', 'Error', {

alex-okrushko

export interface ResultState {
  result: Result|null,
  callState: CallState;
}

const initState: ResultState = {
  result: null,
  callState: LoadingState.INIT,
}

alex-okrushko

export const isLoading = createSelector(
  getResultState,
  state => state.callState === CallState.LOADING,
);

export const isLoaded = createSelector(
  getResultState,
  state => state.callState === CallState.LOADED,
);

alex-okrushko

export enum ActionTypes {
  Login = '[Login Page] Login',
}
 
export class Login implements Action {
  readonly type = ActionTypes.Login;
 
  constructor(public payload: { username: string; password: string }) {}
}

alex-okrushko

/** see below - comment is required for all exported symbols */
export const LOGIN = '[Login Page] Login',

interface LoginPayload {
  username: string;
  password: string;
}

/** Action to log in the User from the Login Page */
export class Login implements Action {

alex-okrushko

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

alex-okrushko

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