زمان استفاده از اپراتورهای «concatMap»، «mergeMap»، «switchMap» و «exhaustMap» در ساختن CRUD با NgRx

https://github.com/danywalls/start-with-ngrx.git

import { Place } from '../../../entities/place.model';

export type PlacesState = {
  places: ArrayPlace>;
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
};

export const placesInitialState: PlacesState = {
  error: '',
  loading: false,
  placeSelected: undefined,
  places: [],
};

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import { Place } from '../../../entities/place.model';

export const PlacesPageActions = createActionGroup({
  source: 'Places',
  events: {
    'Load Places': emptyProps(),
    'Add Place': props{ place: Place }>(),
    'Update Place': props{ place: Place }>(),
    'Delete Place': props{ id: string }>(),
    'Select Place': props{ place: Place }>(),
    'UnSelect Place': emptyProps(),
  },
});

export const PlacesApiActions = createActionGroup({
  source: 'PlaceAPI',
  events: {
    'Load Success': props{ places: ArrayPlace> }>(),
    'Load Fail': props{ message: string }>(),
    'Add Success': props{ place: Place }>(),
    'Add Failure': props{ message: string }>(),
    'Update Success': props{ place: Place }>(),
    'Update Failure': props{ message: string }>(),
    'Delete Success': props{ id: string }>(),
    'Delete Failure': props{ message: string }>(),
  },
});

import { createReducer, on } from '@ngrx/store';
import { placesInitialState } from './places.state';
import { PlacesApiActions, PlacesPageActions } from './places.actions';

export const placesReducer = createReducer(
  placesInitialState,
  on(PlacesPageActions.loadPlaces, (state) => ({
    ...state,
    loading: true,
  })),
  on(PlacesPageActions.selectPlace, (state, { place }) => ({
    ...state,
    placeSelected: place,
  })),
  on(PlacesPageActions.unSelectPlace, (state) => ({
    ...state,
    placeSelected: undefined,
  })),

  on(PlacesApiActions.loadSuccess, (state, { places }) => ({
    ...state,
    places: [...places],
  })),

  on(PlacesApiActions.loadFailure, (state, { message }) => ({
    ...state,
    loading: false,
    error: message,
  })),
  on(PlacesApiActions.addSuccess, (state, { place }) => ({
    ...state,
    loading: false,
    places: [...state.places, place],
  })),
  on(PlacesApiActions.addFailure, (state, { message }) => ({
    ...state,
    loading: false,
    message,
  })),
  on(PlacesApiActions.updateSuccess, (state, { place }) => ({
    ...state,
    loading: false,
    placeSelected: undefined,
    places: state.places.map((p) => (p.id === place.id ? place : p)),
  })),
  on(PlacesApiActions.updateFailure, (state, { message }) => ({
    ...state,
    loading: false,
    message,
  })),
  on(PlacesApiActions.deleteSuccess, (state, { id }) => ({
    ...state,
    loading: false,
    placeSelected: undefined,
    places: [...state.places.filter((p) => p.id !== id)],
  })),
  on(PlacesApiActions.deleteFailure, (state, { message }) => ({
    ...state,
    loading: false,
    message,
  })),
);

import { Actions, createEffect, ofType } from '@ngrx/effects';
import { inject } from '@angular/core';
import { PlacesService } from '../../../services/places.service';
import { PlacesApiActions, PlacesPageActions } from './places.actions';
import { catchError, exhaustMap, map, of } from 'rxjs';

export const loadPlacesEffect = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.loadPlaces),
      exhaustMap(() =>
        placesService.getAll().pipe(
          map((places) => PlacesApiActions.loadSuccess({ places })),
          catchError((error) =>
            of(PlacesApiActions.loadFailure({ message: error })),
          ),
        ),
      ),
    );
  },
  { functional: true },
);

export const updatePlaceEffect$ = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.addPlace),
      concatMap(({ place }) =>
        placesService.update(place).pipe(
          map((apiPlace) =>
            PlacesApiActions.updateSuccess({ place: apiPlace }),
          ),
          catchError((error) =>
            of(PlacesApiActions.updateFailure({ message: error })),
          ),
        ),
      ),
    );
  },
  { functional: true },
);

export const addPlacesEffect$ = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.addPlace),
      mergeMap(({ place }) =>
        placesService.add(place).pipe(
          map((apiPlace) => PlacesApiActions.addSuccess({ place: apiPlace })),
          catchError((error) =>
            of(PlacesApiActions.addFailure({ message: error })),
          ),
        ),
      ),
    );
  },
  { functional: true },
);

export const deletePlaceEffect$ = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.deletePlace),
      mergeMap(({ id }) =>
        placesService.delete(id).pipe(
          map((id_response) =>
            PlacesApiActions.deleteSuccess({ id: id_response }),
          ),
          catchError((error) =>
            of(PlacesApiActions.deleteFailure({ message: error })),
          ),
        ),
      ),
    );
  },
  { functional: true },
);

export const deletePlaceSuccessEffect$ = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesApiActions.deleteSuccess),
      mergeMap(() =>
        placesService.getAll().pipe(
          map((places) => PlacesApiActions.loadSuccess({ places })),
          catchError((error) =>
            of(PlacesApiActions.loadFailure({ message: error.message })),
          ),
        ),
      ),
    );
  },
  { functional: true },
);

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { homeReducer } from './pages/home/state/home.reducer';
import { placesReducer } from './pages/places/state/places.reducer';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authorizationInterceptor } from './interceptors/authorization.interceptor';
import { provideEffects } from '@ngrx/effects';
import * as homeEffects from './pages/home/state/home.effects';
import * as placesEffects from './pages/places/state/places.effects';

export const appConfig = {
  providers: [
    provideRouter(routes),
    provideStore({
      home: homeReducer,
      places: placesReducer, //register placesReducer
    }),
    provideStoreDevtools({
      name: 'nba-app',
      maxAge: 30,
      trace: true,
      connectInZone: true,
    }),
    provideEffects([homeEffects, placesEffects]), //the placesEffects
    provideAnimationsAsync(),
    provideHttpClient(withInterceptors([authorizationInterceptor])),
  ],
};

const selectPlaceState = createFeatureSelectorPlacesState>('places');

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { PlacesState } from './places.state';

const selectPlaceState = createFeatureSelectorPlacesState>('places');

const selectPlaces = createSelector(
  selectPlaceState,
  (placeState) => placeState.places,
);

const selectPlaceSelected = createSelector(
  selectPlaceState,
  (placeState) => placeState.placeSelected,
);
const selectLoading = createSelector(
  selectPlaceState,
  (placeState) => placeState.loading,
);
const selectError = createSelector(
  selectPlaceState,
  (placeState) => placeState.error,
);

export default {
  placesSelector: selectPlaces,
  selectPlaceSelected: selectPlaceSelected,
  loadingSelector: selectLoading,
  errorSelector: selectError,
};

  store = inject(Store);
  places$ = this.store.select(PlacesSelectors.placesSelector);
  error$ = this.store.select(PlacesSelectors.errorSelector);
  placeSelected$ = this.store.select(PlacesSelectors.selectPlaceSelected);

import { Component, inject, input } from '@angular/core';
import { Place } from '../../entities/place.model';
import { Store } from '@ngrx/store';
import { PlacesPageActions } from '../../pages/places/state/places.actions';

@Component({
  selector: 'app-place-card',
  standalone: true,
  imports: [],
  templateUrl: './place-card.component.html',
  styleUrl: './place-card.component.scss',
})
export class PlaceCardComponent {
  place = input.requiredPlace>();
  store = inject(Store);

  edit() {
    this.store.dispatch(PlacesPageActions.selectPlace({ place: this.place() }));
  }

  remove() {
    this.store.dispatch(PlacesPageActions.deletePlace({ id: this.place().id }));
  }
}

 class="column">
  
 class="card place-card">
    
 class="card-image">
      
 class="image is-4by3">
         [alt]="place().description" [src]="place().avatar">
      
    
    
 class="card-content">
      
 class="media">
        
 class="media-content">
          
 class="title is-4">{{ place().name }}
          
 class="subtitle is-6">Visited on: {{ place().createdAt }}
        
      
      
 class="content">
        {{ place().description }}.
        

        Price: {{ place().price }}
      
      
 class="buttons">
         (click)="edit()" class="button is-info">Change Name
         (click)="remove()" class="button is-danger">Remove