NGRX-처음부터 Pub Sub

따라와, 주제나 개선에 대한 당신의 건의를 들으니 기쁩니다/Chris

NGRX is an implementation of the Redux pattern. The Redux pattern is itself a publish/subscribe pattern also called Pub-Sub. Essentially this pattern is about one key thing, when a change happens it might be the concern of one or many parts of your application and you need a way to convey that change. You also need a way to do so without your code being coupled

그럼 우리 처음부터 Pub-Sub, Redux, 우리가 필요로 하는 유형 스크립트와 기본적인 RxJS를 공부합시다. 더 이상 곤혹스러워하지 마세요, 네?
이 문서는 다음 시리즈의 일부입니다.

NGRX-처음부터, 첫 번째 부분, Pub sub, 우리는 여기 있다

, 핵심 개념과 다른 실현, 진행 중

, NGRX 스토어, 여기에는 상점의 기본 사용

이 포함됩니다.

NGRX-처음부터 네 번째 부분, NGRX효과, 진행 중

NGRX-처음부터 다섯 번째 부분, NGRX 실체, 진행 중

이 문서에서는 다음을 다룹니다.

Pub Sub, 그것이 무엇인지, 그리고 우리가 필요로 하는 이유

메시지 통신, Pub-Sub 모드의 실현, 그리고 우리가 사용하고 있는 모든 구성 요소 기반 라이브러리/프레임워크에 어떻게 응용할 것인가.

Pub Sub의 요구 사항

우리가 시작할 때 말한 바와 같이 NGRX는 Redux의 실현이다. 우리가 응용 프로그램에 진정으로 추가한 것은 Sub를 발표하는 능력이다. 즉, 시스템이 변화할 때 메시지를 방송하는 것이다.네, 그럼 언제 일어났어요?그래, 응용 프로그램을 어떤 언어로 설정한 후에 이 언어를 바꾸면 무슨 일이 일어날까?응, 어떤 언어 집합은 프로그램이 프로그램의 일부분이나 전체를 선택한 언어로 번역했다는 것을 의미할 가능성이 높다.따라서 한 언어를 도입할 때 번역을 해야 하는데 문제는 응용 프로그램의 어느 부분이 영향을 받는가?너는 나보다 이 점을 더 잘 알 수 있지만, 우리가 몇 가지 이유를 소개해 보자.유지보수에 편리하도록 프로그램이 몇 개의 구성 요소로 나눌 수 있습니다.응용 프로그램이 여러 페이지로 구성되어 있고, 페이지마다 구성 요소가 있다면, Pub-Sub는 필요 없습니다.

Huh?

만약 간단한 응용 프로그램이 있다면, 예를 들어 5페이지, 페이지마다 구성 요소가 있다면, 새로운 언어로 바뀔 때, 당신이 서 있는 페이지에 영향을 주기만 하면 된다.이 경우 다음 위조 코드를 사용하여 새 번역을 요청하는 서비스가 호출될 수 있습니다.

function onLanguageChange(newLang) {
  service.getTranslationsByLang(newLang);
}

현재, 당신은 이러한 새로운 번역을 당신의 사이트에 응용하는 방법을 찾아야 합니다. 아래와 같습니다.

function onLanguageChange(newLang) {
  const translations = service.getTranslationsByLang(newLang);
  this.title = translations.title;
  this.description = translations.description
}

그리고 이 페이지에서 다른 페이지로 전환할 때 위와 같이 해야 할 일이 있지만, 가능한 한 빨리 구조 함수나 ngOnInit 에서 이렇게 해야 한다. 예를 들어

constructor(){
  const translations = service.getTranslationsByLang(newLang);
  this.title = translations.title;
  this.description = translations.description
}

So when do I need Pub/Sub?

예를 들어, 한 페이지에 많은 구성 요소가 있고, 응용 프로그램 범위의 변경 (예를 들어 언어 변경) 을 진행했을 때, 이 모든 구성 요소들에게 당신이 관심을 가져야 할 변경 사항이 이미 발생했음을 알려야 합니다.현재 Angular를 사용하고 있다면 @Input 를 사용하여 이 구성 요소에 속성을 설정할 수 있습니다. 그러나 이것은 곧 매우 혼란스러워져서 보여 드리겠습니다.

class Component {
  private _lang = '';

  @Input('language')
  set lang(value) {
    this._lang = value; 
    const translations = service.getTranslationsByLang(newLang)
    this.title = translations.title;
    this.description = translations.description;
  };
  get language() {  
    return this._lang;
  }
}

뭔가 이상한데, 쓸 게 많아?

메시지와 통신

이 점에서 피해는 진실입니다. 왜냐하면 10개의 다른 구성 요소를 위해 상술한 코드를 작성했을 가능성이 높기 때문입니다.너는 service.getTranslationsByLang에 대한 호출을 줄이고 한 중심 위치에서만 이렇게 하는 좋은 방법을 생각해 냈을지도 모른다. 그리고 우리는 번역만 보낼 것이다.
하지만 상처는 무엇으로 이루어져 있습니까?아, 지금 저희가 정확한 질문을 했습니다. 데미지는 3-4줄을 써야 하기 때문이 아니라 구성 요소의 모든 속성에 정확한 번역을 분배해야 하기 때문입니다. - 데미지는 우리가 하나의 속성을 사용하여 X개의 구성 요소의 언어를 설정하기 때문입니다.이런 정보를 전달하는 방식은 매우 결합되고 우리가 사용하는 특정한 구조에 매우 의존한다.

Ok, so what's a better way to do it?

더 좋은 방법은 소식을 통해 통신하는 것이다.메시지와 통신하는 것은 우리가 송신자와 탐지기를 하나 이상 가지고 있다는 것을 의미한다.이 정도는 할 수 있는 방법이 많다.다음은 상세하지 않은 목록입니다.

일반 구현 사용

라이브러리 EventEmitter 사용

RxJS 사용

우리는 이 글을 너무 길게 쓰지 않지만, 첫 번째 사례, 일반적인 실현을 실현합시다.

일반적 실현

라이브러리를 사용하지 않는 경우 다음과 같은 요구 사항을 충족해야 합니다.

우리는 메시지를 보내는 방식이 필요하다

구독, 구독 취소 메시지 방식

자, 간단한 실현을 봅시다.

class PubSub {
  constructor() {
    this.listeners = [];
  }

  send(messageType, message) {
    this.listeners.forEach(l => l(messageType, message));
  }

  subscribe(listener) {
    this.listeners.push(listener);
  }

  unsubscribe(list) {
    this.listeners = this.listeners.filter( l => l !== list);
  } 

}

module.exports = PubSub;

우리 위의 구현은 send() 방법으로 메시지를 보내는 것을 지원하고, 방법subscribe()과 unsubscribe()은 우리에게 탐지기를 추가/삭제하는 방법을 제공했다.이것은 거의 우리가 해야 할 전부다.
이것으로 돌려보세요. 이렇게 보여요.

const PubSub = require('./pubsub');

const ps = new PubSub();

const l1 = (type, message) => {
  console.log('sub1');
  console.log(`Type: ${type}, Message: ${message} `);
};

const l2 = (type, message) => {
  console.log('sub2');
  console.log(`Type: ${type}, Message: ${message} `);
}

ps.subscribe(l1)

ps.subscribe(l2)

ps.send('INCREMENT', 1);
ps.send('language', 'en');

ps.unsubscribe(l1);

ps.send('spam', 'hello');

위에서 볼 수 있듯이 우리는 두 개의 탐지기l1와 l2를 정의했다.두 청중은 모두 우리의 PubSub 과정을 구독했다.그리고 우리는 l1 호출 unsubscribe() 을 통해 정탐을 멈추는 것을 보았다.이 프로그램을 실행하면 다음과 같은 출력을 얻을 수 있습니다.

출력은 우리의 두 탐지기가 어떻게 메시지 INCREMENT 와 language 를 얻는지, l2 만 메시지 spam 를 얻는지 보여 줍니다. 왜냐하면 l1 는 메시지가 발생하기 전에 구독되지 않았기 때문입니다.
네, 저희 PubSub 과정은 효과가 있는 것 같습니다.그럼 이 모든 게 무슨 의미가 있을까요?이 생각은 두 가지를 보여주기 위해서다.

메시지 통신

느슨한 결합 방식으로 통신을 진행한다. 즉, 우리는 Angular, Vue, React 또는 우리가 사용하는 모든 라이브러리의 실현 세부 사항에 의존하지 않는다.

구성 요소에 적용하고 언어를 변경하면 다음 코드를 얻을 수 있습니다.

// PubSub.js

class PubSub {
  constructor() {
    this.listeners = [];
  }

  send(messageType, message) {
    this.listeners.forEach(l => l(messageType, message));
  }

  subscribe(listener) {
    this.listeners.push(listener);
  }

  unsubscribe(list) {
    this.listeners = this.listeners.filter( l => l !== list);
  } 

}

const pubSub = new PubSub();

module.exports = pubsub;

위에서 우리는 창설 PubSub 의 실례를 통해 PubSub 클래스를 약간 변경했습니다. 우리는 이 실례를 내보내고 있습니다.

// sending component
import PubSub = require('./pubsub');

class Component {
  constructor() {
  }

  setLanguage() {
    pubsub.send('changeLanguage', 'en');
  }

}

위의 송신 구성 요소는 우리의 PubSub 실례만 가져오고 호출 방법send()을 통해 메시지를 보냅니다.

// listening component
import PubSub = require('./pubsub');

class OtherComponent {
  constructor() {
    pubsub.subscribe(this.onMessage.bind(this));   
  }

  onMessage(type, message) {
    if (type === 'changeLanguage') {
      const translations = service.getTranslationsByLang(message);
      this.title = translations.title;
    }
  }
}

탐지 모듈은 같은 PubSub 실례를 사용하고 onMessage() 방법을 구조 함수의 탐지기로 설정합니다.그리고 메시지를 보낼 때 같은 onMessage() 방법을 사용합니다.주의해야 할 것은 번역 서비스에서 새로운 번역을 얻기 전에 우리가 보낸 메시지의 유형을 어떻게 검사하는가 changeLanguage.

총결산

본고는 NGRX와 Redux의 기본 모델인 Pub-Sub를 논의하고자 합니다. 메시지를 하나 이상의 탐지기에 보내는 능력입니다.우리는 언제 그것을 필요로 하는지, 심지어는 매우 간단한 실현, PubSub라는 클래스를 구축하고, 이를 어떻게 우리의 구성 요소와 함께 사용하는지 보여 주었다.
다음 부분에서 우리는 모델 Redux를 전문적으로 연구할 것이다. 이것은 Pub-Sub의 더욱 전문적인 버전으로 본질적으로 같은 모델이지만 현재 상태의 메모리를 가지고 더욱 신중한 상태 변경 방식이다.