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 interface ResultState {
  result: Result|null,
  callState: CallState;
}

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

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 const enum LoadingState {
    INIT = 'INIT',
    LOADING = 'LOADING',
    LOADED = 'LOADED',
}
export interface ErrorState {
    errorMsg: string;
}

export type CallState = LoadingState | ErrorState;

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

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

alex-okrushko

@Effect()
addComment: Observable<Action> = this.actions.pipe(
    ofType(actions.ADD_COMMENT),
    concatMap(
        ({payload}) =>
            this.commentsService.add(payload.productId, payload.comment)
                .pipe(
                    map(response => new actions.AddCommentSuccess()),
                    catchError(
                        error =>

alex-okrushko

@Effect()
showAddCommentDialog: Observable<Action> = this.actions.pipe(
    ofType(actions.SHOW_ADD_COMMENT_DIALOG),
    withLatestFrom(
        this.store.select(selectors.getCurrentProductId)),
    concatMap(
        ([{payload}, productId]) =>
            this.dialog.open(AddCommentDialog, {data: payload})
                .afterClosed()
                .pipe(

alex-okrushko

@Component({
  templateUrl: './add_comment_dialog.ng.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddCommentDialog {
  comment: FormControl;

  constructor(
      readonly dialogRef: MatDialogRef<AddCommentDialog>,
      @Optional() @Inject(MAT_DIALOG_DATA) readonly errorPayload?:

alex-okrushko

export function reducer(
  state: CartState = initState,
  action: cartActions.All
): CartState {
  switch (action.type) {
    case cartActions.ADD_ITEM: {
      // Concatinating the id to the list
      const newCartItemsIds = [...state.cartItemsIds, action.itemId];
      return {
        cartItemsIds: newCartItemsIds,