Ngrx 효과 - 격리각도 응용에서의 부작용

부작용은 무엇입니까?
side effect은 다음과 같은 상태 수정을 의미합니다.

변수의 값 변경;

은 일부 데이터를 디스크에 씁니다.

사용자 인터페이스에서 버튼을 사용 또는 사용 안 함으로 설정합니다.

… source

카탈로그

왜 NgRx 효과입니까?

서비스 기반 설계 및 NgRx 기반 설계

NgRx 효과

설치

구현

모듈

에 NgRx 효과 등록

왜 NgRx 효과입니까?
순수 어셈블리에는 변수가 없으며 이벤트는 출력으로 생성됩니다.이 구성 요소들은 본질적으로 벙어리여서, 대부분의 계산은 그 밖에서 이루어진다.순수 구성 요소는 순수 기능과 유사한 단일 직책을 가지고 있다.
현재 구성 요소가 아무런 계산을 하지 않으면 대부분의 계산과 부작용이 서비스로 옮겨집니다.이것은 각도 서비스의 첫 번째 사용이다.그것들을 구성 요소에 주입하고 각종 계산을 실행하는 것은 매우 쉽다.
다음은 네가 고려해야 할 것들-

우선, 애플리케이션이 빠르게 성장하고 있으며 구성 요소 또는 서비스 내에서 스토리지/관리 상태를 유지하고 있다면 상태 관리 솔루션을 고려해야 합니다.

이 서비스들은 이상적인 선택이지만 수동으로 상태를 저장하고 상태가 변하지 않고 일치하며 모든 의존 구성 요소와 서비스에 사용할 수 있도록 해야 합니다.

에서는 API를 통해 원격 서버와 통신하는 서비스가 있다고 가정해 보겠습니다.서비스를 구성 요소에 주입하고 구성 요소 내에서 서비스를 호출하는 방법입니다.

... 다른 서비스가 있다면, 사용자가 UI와 상호작용을 할 때, 예를 들어 단추를 누르면 이 계산을 실행해야 한다.마찬가지로, 구성 요소에 서비스를 주입하고, 단추의 click에서 서비스를 호출하는 방법입니다.

잘 작동하지만, 구성 요소가 서비스와 밀접하게 결합되어 있음을 알면, 사용자가 단추를 누르거나 API를 호출해야 할 때 어떤 작업을 해야 하는지 알 수 있습니다.
이런 모델의 첫 번째 단점은 구성 요소가 많은 서비스에 의존하기 때문에 테스트하기 어렵다는 것이다.구성 요소를 다시 사용하는 것은 거의 불가능하다는 것을 알 수 있을 것입니다.
그럼 다른 방법은 뭐야..
또 다른 방법은 구성 요소를 순수하게 유지하고 관리 상태를 책임지지 않도록 하는 것이다.대신 데이터를 입력할 때 UI에 표시되고 UI 상호 작용이 있을 때 관련 이벤트가 생성되도록 수동적으로 설정합니다.
그냥 이렇게...
구성 요소는 입력 데이터를 어떻게 사용할 수 있는지 알 필요도, 이벤트를 어떻게 처리하는지 알 필요도 없다.
그러나 이러한 서비스는 응용 프로그램의 중요한 구성 부분이다.여기에는 여전히 다양한 계산을 수행하거나 API를 통해 통신하는 모든 방법이 포함되어 있습니다.하지만 이제 구성 요소 내부에 주입되지 않습니다.
NgRx 상태 관리에 대한 게시물을 썼습니다. 이를 통해 NgRx 상태 관리를 알 수 있습니다.
서비스 기반 설계와 NgRx 효과 간의 비교를 살펴보겠습니다.
서비스 기반의 디자인 과정에서, 당신은 비교적 적은 요소가 작용하는 것을 알아차릴 수 있지만, 그것이 당신을 속이지 않도록 해야 합니다.프로그램에 나쁜 프로그램보다 더 많은 요소가 있습니다.

서비스 기반 설계AppComponent에 사용자 목록이 필요하다고 가정하십시오.

저희는 AppRemoteService의 서비스를 가지고 있습니다. 이 서비스는 users$ observable을 포함하고 사용자 목록을 구독할 수 있습니다.

users$ = this.httpClient.get<User[]>(URL).pipe(take(1));

AppRemoteService을 AppComponent에 주입했습니다. AppRemoteService.users$ observable를 구독하겠습니다.

@Component({
    template: `
    <div class="user-container" 
      *ngIf="localUsers">
     <app-user *ngfor="let user of localUsers" 
                [inputUser]="user">
  </div>
    `
})
export class AppComponent{
//state inside component
localUsers: User[];

constructor(private remoteService: RemoteService){}

  ngOnInit(){
      //handle the subscription here
  this.remoteService.users$.subscrible(
      users => this.localUsers = users;
      );
  }
  } 

NgRx 효과에 기반한 설계
다음은 NgRx 효과가 어떻게 바뀔지 -

AppComponent는 NgRx Store을 선택하거나 state을 보내면 됩니다.

export class AppComponent implements OnInit {
 constructor(private store: Store<fromApp.AppState>) { }
 }

은 구성 요소가 사용자 목록을 필요로 하면 구성 요소가 초기화될 때 actions을 보냅니다.

export class AppComponent implements OnInit {
 constructor(private store: Store<fromApp.AppState>) { }

 ngOnInit(): void {
     //action dispatched
    this.store.dispatch(fromActions.loadUsers());
 }

}

구성요소는 NgRx 선택기 loadUsers을 사용하여 관측 가능한 데이터에 가입합니다.

@Component({
 template: `
     <div class="user-container" 
         *ngIf="localUsers$ | async as users">
         <app-user *ngfor="let user of users" 
                    [inputUser]="user">
     </div>
 `
})
export class AppComponent implements OnInit {
  localusers$ = this.store.select(fromSelectors.selectUsers);

  constructor(private store: Store<fromApp.AppState>) { }

  ngOnInit(): void {
    this.store.dispatch(fromActions.loadUsers());
  }
}

NgRx Effects는 최신 상태가 변경된 이후 전송된 동작 흐름을 수신합니다.selectUsers effect는 loadUsers$에서 보낸 loadUsers 작업에 관심이 있습니다.따라서 구성 요소가 초기화될 때 AppComponent 조작을 조정합니다.효과가 반응하여 loadUsers을 구독합니다.

데이터를 가져오면 remoteservice.users$ 효과는 loadUsers$ 조작과 관련된 메타데이터 - 사용자를 발송합니다.상응하는 감속기 기능은 상태를 전환할 것이다.최신 상태는 최근feteched 사용자를 포함합니다.

//app.effects.ts
 loadUsers$ = createEffect(
    () => this.action$.pipe(
        ofType(AppActions.loadUsers),
        mergeMap(() => this.remoteService.users$
        .pipe(
            map(users => AppActions.addUsers({ users })),
            catchError(error => {
            return of(error);
            })
        )),
 ));



//app.reducer.ts
//addUsers action mapping 

const theReducer = createReducer(
  initialState,
  on(AppActions.addUsers, (state, { users }) => ({
    ...state,
    users: [...users]
  }))

);

데이터가 사용 가능하면 addUsers observable 구독은 구성 요소가 나타날 수 있도록 사용자 목록을 제공합니다.

NgRx 효과를 사용하여 부작용을 격리하는 서비스 기반 방법과 달리 구성 요소는 데이터의 로드 방식에 무관심하다.구성 요소를 순수하게 유지하는 것 외에, 테스트 구성 요소를 더욱 쉽게 하고, 다시 사용할 수 있는 기회를 증가시킨다.
이 점을 알고 있다면, angular 프로그램에서 NgRx 효과를 설치하고 실현하는 방법을 알고 싶을 수도 있습니다.나는 상세한 댓글을 한 편 썼다.Click here 보기.