NGXS 3.7 출시

2020년은 정말 기복이 심한 한 해입니다!개원 수호자로서 이런 비정상적인 충격은 의심할 여지없이 도전을 가져왔다...일은 가정을 점령하고, 가정은 일을 점령하며, 우리의 하루 한 방울 한 방울은 혼란에 휘말린다.
이번 업데이트는 이미 오랫동안 진행되었고 모든 새로운 특성을 둘러싸고 오랫동안 토론하였으며, 올해 Angular와 TypeScript에 중대한 변화가 발생한 후, 라이브러리와 API의 안정성과 향후 호환성을 확보하기 위해 많은 노력을 기울였다.
믿을 수 없는 지역사회에 대한 지속적인 공헌, 열정과 지지에 감사드립니다!
이제 발표를 시작합시다...

개요

🚀 공식 각도 10 스탠드

🛑 개선된 오류 메시지

🐛 오류 수정

🔌 플러그인 개선 및 수정

공식 각도 10 지지

Angular 10은 도서관에 많은 배후 개선을 가져왔다. 우리는 모두 알고 있고 좋아한다.기본 도구 업데이트, 라이브러리 종속 항목 (TypeScript 등) 버전 업그레이드, Ivy 및 패키지 크기 개선
Angular 10이 발표된 날, 우리는 전 세계에 새로운 버전을 전적으로 지지한다고 선포할 준비를 하고 있다...그러나 유감스럽게도 우리는 각도 10가지issues with HMR를 발견했다.@ngxs/store 라이브러리와 모든 다른 플러그인은 Angular 10을 지원하지만 HMR 플러그인은 이렇게 운이 좋지 않다.우리는 HMR 플러그인을 포함한 모든 핵심 플러그인으로 라이브러리 안정성에 대한 약속을 확장했다.
우리는 이 문제를 해결하려고 시도했지만, 불행하게도, 우리는 할 수 없었다. 이 문제는Angular팀의 많은 관심을 받지 못했다.따라서 HRM 플러그인을 추천하지 않기로 했습니다.잠시 후에 이것에 대해 상세하게 소개할 것이다...

개선된 오류 메시지

때때로 개발자는 응용 프로그램의 작은 문제들을 놓치고 둔하고 디버깅하기 어려운 문제를 초래할 수 있다.우리는 개발자에게 더 좋은 피드백을 제공하여 그들이 어디에 문제가 있는지 알 수 있도록 오류 검출과 메시지 전달을 개선했다.
다음은 우리가 소개한 몇 가지 장면이다.

동작의 빈 유형 속성(PR#1625)

예를 들어 type 속성이 있지만 값을 설정하지 않은 동작을 정의하면 typescript는 즐겁고 프로그램은 컴파일할 수 있지만 동작 처리 프로그램은 동작의 유형을 정확하게 확정할 수 없습니다.
이제 빈 type 속성이 있는 동작을 알릴 수 있는 편리한 메시지가 표시됩니다.

ofAction* 연산자의 매개변수가 잘못되었습니다(PR#1616)

ofAction* 파이핑 연산자는 이전에 매개변수에 대해 상당히 개방적인 유형을 정의했습니다.우리는 효과적인 동작 유형만 받아들일 수 있도록 이런 유형을 개선했다.

빈틈 수리

이완@ 유형 선택 검사(PR#1623)

NGXS v3.6에서 typescript 기술을 추가했습니다. @Select 수식자 수식 변수의 성명 형식이 수식자가 인용한 선택기 형식과 일치하지 않으면 오류가 표시됩니다.불행하게도 이 장식기는 private 또는 protected 필드와 함께 사용하는 것을 막았다.이것은 NGXS v3.5에 대한 회귀이기 때문에 우리는 이 변화를 회복했다.

빈 관찰 값 올바르게 처리(PR#1615)

이전에 @Action 함수에서 반환된 관찰 가능한 값이 실행되지 않으면 취소된 것으로 간주됩니다.이런 되돌아오는 관찰 대상은 완전히 유효하기 때문에 우리는 관찰 대상의 내부 처리를 조정하여 빈 관찰 대상을 유효한 완성 장면으로 받아들였다.

플러그인 개선 사항

레코더 플러그인

기능: Logger 플러그인의 동작 필터(PR#1571)

레코더 플러그인은 특정 동작을 무시할 수 있는 옵션이 없습니다.그것은 모든 동작을 기록하거나 비활성화할 때 어떤 동작도 기록하지 않는다.그러나 다음과 같은 몇 가지 이유로 조건부 작업이 필요할 수 있습니다.

어떤 행동은 당신의 중점이 아니다. 그것을 기록하는 것도 당신이 진정으로 무엇을 하고 있는지 찾기 어려울 것이다.

일부 조작은 너무 자주 촉발되어 컨트롤러가 매우 번거로워졌다.

특정 상태가 있을 때만 작업을 기록합니다.

이 버전에서 forRoot의 NgxsLoggerPluginModule 방법은 filter 옵션을 사용합니다. 이것은 기록할 동작을 정의하는 술어입니다.다음은 간단한 예입니다.

import { NgxsModule, getActionTypeFromInstance } from '@ngxs/store';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { SomeAction } from './path/to/some/action';

@NgModule({
  imports: [
    NgxsModule.forRoot([]),
    NgxsLoggerPluginModule.forRoot({
      filter: action => getActionTypeFromInstance(action) !== SomeAction.type
    })
  ]
})
export class AppModule {}

이 예에서 SomeAction 조작은 기록되지 않는다. 왜냐하면 술어가 되돌아오기 때문이다false.현재 상태 스냅샷을 술어에서 사용할 수 있는 경우 보다 복잡한 사전 설명을 전달할 수 있습니다.

import { NgxsModule, getActionTypeFromInstance } from '@ngxs/store';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { SomeAction } from './path/to/some/action';

@NgModule({
  imports: [
    NgxsModule.forRoot([]),
    NgxsLoggerPluginModule.forRoot({
      filter: (action, state) =>
        getActionTypeFromInstance(action) === SomeAction.type && state.foo === 'bar'
    })
  ]
})
export class AppModule {}

이 예에서 제시한 술어는 기록SomeAction만 허용하고 foo 상태가 'bar' 과 같을 때만 허용합니다.이것은 디버깅을 할 때 이미 스케줄링된 조작을 더욱 쉽게 확정할 수 있게 한다.
중요 힌트: 모든 동작은 술어를 호출합니다.이것은 개발 중의 성능 문제를 초래할 수 있습니다. 특히 디버깅 후에 술어를 보존할 계획일 때.따라서 간단한 동작보다 복잡한 필터에 메모리 함수를 사용하는 것을 고려해 보세요.너는 메모리 라이브러리를 이용하여 이 점을 실현할 수 있다.

스토리지 플러그인

특징: 스토리지 플러그인의 정렬 차단기(PR#1513)

상태 서열화나 반서열화 전이나 이후에 자신의 논리를 정의할 수 있습니다.

beforeSerialize: 이 옵션을 사용하여 서열화하기 전에 상태를 변경합니다.

후 정렬화: 이 옵션을 사용하여 반정렬화 후 상태를 변경합니다.예를 들어, 당신은 그것을 사용하여 구체적인 종류를 실례화할 수 있습니다.

@NgModule({
  imports: [
    NgxsStoragePluginModule.forRoot({
      key: 'counter',
      beforeSerialize: (obj, key) => {
        if (key === 'counter') {
          return {
            count: obj.count < 10 ? obj.count : 10
          };
        }
        return obj;
      },
      afterDeserialize: (obj, key) => {
        if (key === 'counter') {
          return new CounterInfoStateModel(obj.count);
        }
        return obj;
      }
    })
  ]
})
export class AppModule {}

양식 플러그인

특징: 양식 동작 재설정(PR#1604)

ResetForm 작업을 사용하여 양식을 재설정할 수 있습니다.

이 동작은 창과 관련 창 상태를 초기화합니다.

이 동작을 호출하면 폼 상태, 더러운 값, 값 등은 관련 폼 값으로 재설정됩니다.

예:

<form [formGroup]="form" ngxsForm="exampleState.form">
  <input formControlName="text" /> <button type="submit">Add todo</button>

  <button (click)="resetForm()">Reset Form</button>
  <button (click)="resetFormWithValue()">Reset Form With Value</button>
</form>

@Component({...})
class FormExampleComponent {
  public form = new FormGroup({
    text: new FormControl(),
  });

  constructor(private store: Store) {}

  resetForm() {
    this.store.dispatch(new ResetForm({ path: 'exampleState.form' }));
  }

  resetFormWithValue() {
    this.store.dispatch(
      new ResetForm({
        path: 'exampleState.form',
        value: {
          text: 'Default Text',
        },
      }),
    );
  }
}

향상: 단순화 ngxsFormClearOnDestroy 속성(PR#1662)

ngxsFormClearOnDestroy 속성에 앞서form원소에 대한 성명이 [ngxsFormClearOnDestroy]="true"까지 정확해야 작업을 할 수 있습니다.
이것은 간단한 볼 속성이기 때문에form 요소에만 이 속성이 존재한다는 것은 이 행위를 의미한다.우리는 이 속성을 개선하여 규범의 모든 유효한 형식을 식별했다.
예를 들어, 이제 다음과 같은 속성만 포함할 수 있습니다.

<form [formGroup]="form" ngxsFormClearOnDestroy ngxsForm="exampleState.form">
  <input formControlName="text" />
</form>

@Component({...})
class FormExampleComponent {
  public form = new FormGroup({
    text: new FormControl(),
  });

  constructor(private store: Store) {}  
}

어셈블리가 제거되면 테이블이 지워집니다.이기다

HMR 플러그인

활용단어참조

위에서 말한 바와 같이, Angular10은 이미 issues with HMR 이러한 문제들이 우리가 첫날부터 정부의 지지를 선포하는 것을 막았다.
여러 차례 그것을 다시 발휘하려고 시도한 후에 우리는 실패를 인정하고 어쩔 수 없이 어려운 결정을 내렸다.지역 사회와 협의한 후에 우리는 HMR 플러그인을 추천하지 않고 HMR 모델에 대한 정부의 지원을 다시 받기로 결정했다.이것은 우리의 일부 기본 이념과 배치된다. 이러한 이념은 NGXS 생태계를 응용 프로그램의 믿을 만한 선택이 되게 하지만, 이러한 상황에서 우리는 우리가 통제할 수 없는 일을 받아들여야 한다.
다음은 우리가 slack 채널에서 지역 사회에 대한 여론조사입니다.

결과는 다음과 같습니다.

💥 73%가 HMR 플러그인 삭제에 찬성

🙏 2%가 플러그인 유지 투표를 했습니다

🤷‍♀️ 25%는 어떤 방식도 개의치 않는다

2%와 토론한 후, 그들은 메모리 플러그인을 사용하여 거의 같은 체험을 할 수 있는지, 그리고 폐기를 지원할 수 있는지를 몰랐다.이 솔루션에 대한 자세한 내용은 문서에 나와 있습니다.

유용한 링크

이 버전의 변경에 대한 더 많은 정보를 알고 싶으면 언제든지 변경 로그를 보십시오.NGXS의 코드는 https://github.com/ngxs/store 에서 얻을 수 있고, 우리의 문서는 http://ngxs.io/ 에서 얻을 수 있다.우리의 slack 채널에는 번영하는 지역사회가 있기 때문에 우리에 가입하여 최신 발전을 이해하는 것을 환영합니다.이것은 느슨함invitation link이다.