각도 + Redex/ngrx: 상태 업데이트 대 양식

각도 + Redex/ngrx: 상태 업데이트 대 양식

일부 컨텍스트 먼저 사용:

• 선택자를 다시 선택하다.
• 정규화 및 표준화를 위한 Normalizr
• ngrx/스토어(Redex의 사후 대응적 구현)는 상태 관리를 위해

반응하는 현실 세계의 예와 유사하게, 나는 실체들에 대한 한 조각의 국가를 가지고 있다. 이것은 실제로denormalize()기사의 작업방법은 다음과 같은 것을 가질 수 있기 때문이다.author또는media모두 실체일 수도 있어

그 말은 예를 들어 싱글을 고를 때user내 주(州)에서, 나는 이 전지구적 실체를 움켜쥐고 있어, 내 선택기는 이와 비슷한 모양이야.

export const getOne = createSelector(
  getAllEntities,
  getDetailId,
  (entities, id) => denormalize(id, schema, entities)
);

다음으로는 ngrx/store에서 "incess"로 지정되며

state.map(getOne).distinctUntilChanged()

이제 내 양식을 채우기 위해 나는 이렇게 한다(반사이비 코드)

class Cmp {
  form = new FormGroup({ /* whatever */});
  user$ = this._store.map(getOne).distinctUntilChanged();

  constructor(private _store: Store<AppState>) {
    this.user$.subscribe((data) => {
      this.form.patchValue(data);
    });
  }
}

재선택과 지도/distincWillChanged의 조합으로 나는 거의 모든 엔티티가 변경될 때마다 새로운 업데이트를 받게 되므로, 이 상황을 고려해 보십시오.

• 문서 ID 5를 방문하면 글로벌 엔티티 슬라이스로 만들어진 스토어 슬라이스에 대한 구독으로 채워짐
• " 편집을 시작하는 경우 "text"FormControl
• 다른 사람이 ID 3으로 사용자를 변경하고 웹 사이트를 통해 업데이트를 수신하여subscribe트리거(전역 도면요소 슬라이스가 변경된 이후) 및 편집 중에 변경한 값을 현재 저장소에 있는 값(이전 값)으로 재지정

..그리고 이 웹세트를 따라 업데이트의 원인이 될 수 있는 상황이 꽤 있다.

환원 세계에는 이것을 해결하는 어떤 패턴이 있는가, 아니면 ngrx 세계의 누군가가 이것을 다루어야 했던가?내가 생각나는 유일한 감각은 당신이 타이핑할 때 상점에 어떤 가치를 두든지 저장하는 것인데, 이것은 저장하기 위해 각진 반응형식을 후크해야 하는데, 이것은 아스에 큰 고통이고 ngrx/폼은 곧 오지 않을 것이다.하지만 누군가가 이미 어떤 간단한 해결책을 생각해 냈을 거야.

고마워!

(기터에 대한 후속 논의를 읽을 수 있음)

양식의 상태를 정규화된 도면요소와 별도로 저장하는 것을 고려하십시오.예를 들어, 상태에는 다음과 같은 속성이 포함될 수 있다.articleEditForm아니면 비슷한 것.기사의 ID를 얻기 위해 라우터 상태에서 구독하는 것에 기초하여,combineLatest기사의 페이로드와 함께 'EDIT_INSTAR' 유형의 액션을 발송하기 위한 스토어의 현재 상태와 함께.그러면 환원기는 그 다음에articleEditForm물품 주 페이로드와 함께 상점 주(州)의 자산.원래 정규화된 실체는 양식을 성공적으로 제출한 후에만 업데이트되며, 가능한 경우 다음의 값을 사용할 수 있다.articleEditForm또는 양식을 제출한 서비스의 응답.이 접근방식은 보다 정교한 디스플레이 및 검증 시나리오를 위해 리듀렉스 저장소에 양식 상태를 보관할 수 있는 장점이 있다.이 값은 키 입력, 입력 변경, 양식 제출 또는 사용 사례의 요구 사항을 충족하는 모든 키 입력에 대해 환원제로 업데이트할 수 있다.

이것은 단순한 형태의 80%에 대한 과잉 살상이다 - 저장소에 있는 정규화된 개체로부터 직접 양식을 채우는 것(아마도 .take(1) 또는 라우터 상태를 사용하고 동시성 우려를 관리하기 위해 저장소와 Latest를 결합하는 것).그러나 바닐라 양식만 사용해도 상태는 상점의 정규화된 개체와는 별도로 관리되며 이는 문제의 IMO의 정확한 모델이다.

지금까지 우리는 모든 키 스트로크가 아닌 입력 흐릿에 대한 스토어를 업데이트함으로써 이 문제를 해결하고 있다.

class Cmp {
    form = new FormGroup({ /* whatever */});

    constructor(private _store: Store<AppState>) {
        this._store.select(getOne)
                   .take(1) // we don't listen to changes
                   .subscribe((data) => {
                       this.form.patchValue(data);
                   });
    }

    onInputBlur() {
        this._store.dispatch({ type: 'UPDATE_USER', payload: this.form.value });
    }
}

그런 다음 입력에 onBlur 이벤트를 추가한다.

<input (blur)="onInputBlur()" formControlName="firstname">

참조URL: https://stackoverflow.com/questions/43217078/angular-redux-ngrx-state-update-vs-forms