alex-okrushko

@Effect()
  fetchProduct: Observable<Action> = this.actions$.pipe(
    ofType(actions.FETCH_CURRENT_PRODUCT),
    withLatestFrom(
      this.store.select(selectors.getCurrentProductId)
    ),
    switchMap(id =>
      this.productService.getProduct(id).pipe(
        map(product => new actions.FetchProductSuccess(product)),
        catchError(() => of(new actions.FetchProductError()))

alex-okrushko

@Component({...})
export class ProductDetailsComponent {
  product$ = this.store.select(selectors.getCurrentProduct);

  constructor(
    private readonly store: Store<{}>,
  ) {
    this.store.dispatch(new actions.FetchCurrentProduct());
  }
}

alex-okrushko

export function reducer(
  state: ProductState = initState,
  action: actions.All
): ProductState {
  switch (action.type) {
    ...
    case actions.FETCH_PRODUCTS_SUCCESS: {
      return {
        // addAll replaces current list of products with new list
        products: productAdapter.addAll(action.payload, state.products),

alex-okrushko

export function productSync(reducer: ActionReducer<{ product: ProductState }>) {
  return (state, action) => {
    let reducedState = reducer(state, action);
    if (action.type === INIT) {
      const data = window.localStorage.getItem('productData');
      if (data) {
        reducedState = {
          ...reducedState,
          product: JSON.parse(data),
        };

alex-okrushko

@Effect()
addCartItem: Observable<Action> = this.actions$.pipe(
  ofType<cartActions.AddItem>(cartActions.ADD_ITEM),
  concatMap(({ itemId }) =>
    this.cartService.addToCart(itemId).pipe(
      // Notice, that nothing is passed to the Success.
      map(() => new cartActions.AddItemSuccess()),
      // passing the itemId to the Error, so it can be restored.
      catchError(() => of(new cartActions.AddItemError(itemId)))
    )

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

@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

@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

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,