필요한 기능 모듈

@Effect - this.actions.pipe 로 액션에 해당하는 내용을 일단 파이핑해준다.

그리고 이펙트 모듈을 해당 컴포넌트의 feature root 모듈에 import 해주고 EffectsModule.forFeature([PaymentEffects]), 이런 식으로 어떤 이펙트를 모듈에 적용할건지 명시해준다

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { reducers } from '../store/reducers/products';
import { PaymentInfoComponent } from './containers/payment-info-page/payment-info-page.component';
import { SharedModule } from '../shared/shared.module';
import { SharedNewModule } from '../shared-new/shared-new.module';
import { PaymentNotAppliedComponent } from './components/payment-not-applied-card/payment-not-applied.component';
import { ApplyInProgressComponent } from './components/apply-in-progress-card/apply-in-progress.component';
import { HasAppliedComponent } from './components/has-applied-card/has-applied.component';
import { PaymentEffects } from '../store/effects/products/payment-effects';
@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SharedNewModule,
    EffectsModule.forFeature([PaymentEffects]),
    RouterModule.forChild([{ path: '', component: PaymentInfoComponent }]),
    StoreModule.forFeature('product', reducers)
  ],
  declarations: [PaymentInfoComponent, PaymentNotAppliedComponent, ApplyInProgressComponent, HasAppliedComponent]
})
export class PaymentInfoPageModule {}

ofType- 액션 타입 반환

map- 액션의 payload와 관련된 객체 데이터 모두 불러오기

exhaustMap - switchMap과 똑같이 옵저버블에서 데이터를 방출하되 먼저오는 순서대로 바꿔준다.

즉 action.payload에 포함된 데이터들을 먼저오는 순서대로 원하는 명령을 수행하고

api를 호출하는것또한 수행한다.

@Effect()
  hospitalNoticeLoad$ = this.actions$.pipe(
    ofType(HospitalNoticeActionTypes.HOSPITAL_NOTICE_LOAD),
    map((action: HospitalNoticeLoad) => action.payload),
    exhaustMap(searchParams => {
      const queryParams: HospitalNoticeQueryParam = (() => {
        const params = {
          skip: (searchParams.pageNum - 1) * HOSPITAL_NOTICE_PAGING_LIMIT,
          limit: HOSPITAL_NOTICE_PAGING_LIMIT
        };

        params[searchParams.searchKey] = searchParams.searchValue;
        return params;
      })();

      return this.hospitalNoticeService.getHospitalNoticeList(queryParams).pipe(
        map(response => {
          return new HospitalNoticeLoadSuccess(response);
        }),
        catchError(error => of(new HospitalNoticeLoadFail(error)))
      );
    })
  );

이 effect 모듈에서 액션을 정의해주는 파일은 - hospital-notice.actions.ts

import { HospitalNotice, HospitalNoticeSearchParams, HospitalNoticeList } from '../../../models/hospital.model';
import { Action } from '@ngrx/store';
import { HttpRes } from '../../../models/common.model';

export enum HospitalNoticeActionTypes {
  HOSPITAL_NOTICE_LOAD = '[HospitalNotice] Hospital Notice Load',
  HOSPITAL_NOTICE_LOAD_SUCCESS = '[HospitalNotice] Hospital Notice Load success',
  HOSPITAL_NOTICE_LOAD_FAIL = '[HospitalNotice] Hospital Notice Load fail',

  HOSPITAL_NOTICE_PARAMS_RESET = '[HospitalNotice] Hospital Notice Search Params Reset',

  HOSPITAL_NOTICE_DETAIL_LOAD = '[HospitalNotice] Hospital Notice detail load',
  HOSPITAL_NOTICE_DETAIL_LOAD_SUCCESS = '[HospitalNotice] Hospital Notice detail load success',
  HOSPITAL_NOTICE_DETAIL_LOAD_FAIL = '[HospitalNotice] Hospital Notice detail load fail',
  HOSPITAL_NOTICE_DETAIL_RESET = '[HospitalNotice] Hospital Notice detail reset',

  HOSPITAL_NOTICE_CREATE = '[HospitalNotice] Hospital Notice create',
  HOSPITAL_NOTICE_CREATE_SUCCESS = '[HospitalNotice] Hospital Notice create success',
  HOSPITAL_NOTICE_CREATE_FAIL = '[HospitalNotice] Hospital Notice create fail',

  HOSPITAL_NOTICE_UPDATE = '[HospitalNotice] Hospital Notice update',
  HOSPITAL_NOTICE_UPDATE_SUCCESS = '[HospitalNotice] Hospital Notice update success',
  HOSPITAL_NOTICE_UPDATE_FAIL = '[HospitalNotice] Hospital Notice update fail',

  HOSPITAL_NOTICE_DELETE = '[HospitalNotice] Hospital Notice delete',
  HOSPITAL_NOTICE_DELETE_SUCCESS = '[HospitalNotice] Hospital Notice delete success',
  HOSPITAL_NOTICE_DELETE_FAIL = '[HospitalNotice] Hospital Notice delete fail',

  HOSPITAL_NOTICE_CLEAR = '[HospitalNotice] Hospital Notice clear'
}

// 병원 공지사항 생성
export class HospitalNoticeCreate implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_CREATE;
  constructor(public payload: HospitalNotice) {}
}

export class HospitalNoticeCreateSuccess implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_CREATE_SUCCESS;
  constructor(public payload: HospitalNotice) {}
}

export class HospitalNoticeCreateFail implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_CREATE_FAIL;

  constructor(public payload: any) {}
}

// 병원 공지사항 수정
export class HospitalNoticeUpdate implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_UPDATE;
  constructor(public payload: HospitalNotice) {}
}

export class HospitalNoticeUpdateSuccess implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_UPDATE_SUCCESS;
}

export class HospitalNoticeUpdateFail implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_UPDATE_FAIL;

  constructor(public payload: any) {}
}

// 병원 공지사항 리스트 조회
export class HospitalNoticeLoad implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_LOAD;
  constructor(public payload: HospitalNoticeSearchParams) {}
}

export class HospitalNoticeLoadSuccess implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_LOAD_SUCCESS;

  constructor(public payload: HospitalNoticeList) {}
}

export class HospitalNoticeLoadFail implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_LOAD_FAIL;

  constructor(public payload: any) {}
}

// 병원 공지사항 상세 불러오기
export class HospitalNoticeDetailLoad implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DETAIL_LOAD;
  constructor(public payload: { hospitalId: string; noticeId: string }) {}
}

export class HospitalNoticeDetailLoadSuccess implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DETAIL_LOAD_SUCCESS;

  constructor(public payload: HospitalNotice) {}
}

export class HospitalNoticeDetailLoadFail implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DETAIL_LOAD_FAIL;

  constructor(public payload: any) {}
}

export class HospitalNoticeDetailReset implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DETAIL_RESET;
}

// 병원 공지사항 삭제
export class HospitalNoticeDelete implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DELETE;
  constructor(public payload: { hospitalNotice: HospitalNotice; searchParams: any }) {}
}

export class HospitalNoticeDeleteSuccess implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DELETE_SUCCESS;
}

export class HospitalNoticeDeleteFail implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_DELETE_FAIL;

  constructor(public payload: any) {}
}

// 병원 공지사항 검색 리셋
export class HospitalNoticeSearchParamsReset implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_PARAMS_RESET;
  constructor(public payload: HospitalNoticeSearchParams) {}
}

export class HospitalNoticeClear implements Action {
  readonly type = HospitalNoticeActionTypes.HOSPITAL_NOTICE_CLEAR;
}

export type HospitalNoticeActions =
  | HospitalNoticeLoad
  | HospitalNoticeLoadSuccess
  | HospitalNoticeLoadFail
  | HospitalNoticeDetailLoad
  | HospitalNoticeDetailLoadSuccess
  | HospitalNoticeDetailLoadFail
  | HospitalNoticeDetailReset
  | HospitalNoticeCreate
  | HospitalNoticeCreateSuccess
  | HospitalNoticeCreateFail
  | HospitalNoticeUpdate
  | HospitalNoticeUpdateSuccess
  | HospitalNoticeUpdateFail
  | HospitalNoticeDelete
  | HospitalNoticeDeleteSuccess
  | HospitalNoticeDeleteFail
  | HospitalNoticeSearchParamsReset
  | HospitalNoticeClear;

실제로 이러한 상태관리를 수행하는 뷰 파일은 - hospital-notice-list.component.ts