나는 어떻게 엔지니어링 RxJs를 역방향으로 하고 반응식 프로그래밍을 배웁니까?섹션 2

여러분, 안녕하세요. 이번 시리즈의 두 번째 부분에 들어가게 되어 기쁩니다.만약 당신이 아직 첫 번째 부분을 보지 못했다면, 아래의 링크에서 보십시오.

나는 어떻게 엔지니어링 RxJs를 역방향으로 하고 반응식 프로그래밍을 배웁니까?

사디드 하크・ 2019년 11월 27일・ 6분 읽기

#javascript #webdev #todayilearned

첫 번째 부분에서 우리는 observables과Reactive Programming의 핵심 개념을 토론했다.여기서 두 번째 부분에서 우리는 반응식 프로그래밍에 더욱 빠져들고 역방향 프로젝트의 여정RxJs을 계속할 것이다.우리는 Rx.map, filter 등 연산자에 대해 어떻게 역방향 공정을 진행하는지 토론할 것이다.사용자가javascript의 observable 로 어떻게 바뀌는지 볼 수 있습니다.
만약 Promises 또는 다른 웹 응용 프로그램을 사용한 적이 있다면, 구성 요소 간에 데이터를 전달하는 것을 발견할 수 있습니다.예를 들어api 요청을 보내면 데이터를 받고 이 데이터에 따라 구성 요소의 상태를 업데이트합니다.우리는 때때로 일부 데이터를 필터해서 다른 구성 요소로 전파하기도 한다.
나 이거 들고 어디 가?우리가api 호출을 하거나 응용 프로그램에서 일부 사용자의 상호작용이 발생할 때 데이터 흐름을 생성하는 것을 볼 수 있습니다.우리는 하나Angular로 이 데이터 흐름을 들을 수 있고, 또 다른 하나observable를 만들어서 첫 번째observables를 들을 수 있다.더 큰 응용에서 우리는 이런 관찰치 체인을 자주 본다.다른 관찰 가능한 대상에서 관찰 가능한 대상으로 되돌아오는 것은 observable 라이브러리의 핵심 부분 중 하나이다.
다음은 시각화된 응용 프로그램의 데이터 흐름에 사용되는 도표입니다.

좋습니다. 우리의 반응식 라이브러리에서 관찰치를 서로 연결할 수 있기를 바랍니다.우선, 우리는 시뮬레이션 RxJs 통화가 필요하다.그럼 이렇게 합시다.

function fakeApi(param) {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve(100)
   }, 1000);
 })
 // or reject
}

보시다시피 이 함수는 약속을 되돌려 주고 있습니다.이제 이 약속 기반 함수를 바꾸고observable를 사용합시다.

const o = new Observable();
function fakeApi(param) {
 setTimeout(() => {
   o.emit(100);
 }, 1000);
}

우리는 약속을 위해 결심하는 것이 아니라 관찰할 수 있는 과정을 통해 우리의 결과를 전달한다.우리의 코드가 예상대로 작동하는 것을 주의하십시오.나는 네가 이미 api의 힘을 보기 시작했다고 믿는다.흥미롭다아닌가?😊😊
지금 우리는 또 다른 관찰물로 관찰하고 싶다observables.위 그림과 같습니다.그럼 우리 어떡하지?우리는 이미 o 함수를 하나 가지고 있다.만약 네가 이전 문장의 예를 기억하고 있다면, 우리는 다음과 같은 내용이 있다

const pipe = (...funcs) => x => funcs.reduce((effects, f) => f(effects), x);

이제 이 파이프 함수를 pipe 클래스에 추가하고 새로운 Observable

class Observable {
 constructor() {
   this.fnArray = [];
 }

 subscribe(fn) {
   this.fnArray.push(fn);
 }

 emit(v) {
   this.fnArray.map(fun => fun(v));
 }
+ pipe(observable) {
+   const fn = x => observable.emit(x);
+   this.subscribe(fn);
+ }
}

따라서 파이프 방법에서 우리는 다른 관찰 대상을 도입했다. 이 전송 관찰 대상은curried 함수를 통해 하나의 값을 보내고 이curried 함수를 구독한다.

그럼, 우리는 왜 이렇게 해야 합니까?좋아, 우리는 파이프를 통해 관찰 가능한 대상을 전송하고 다른 관찰 가능한 대상을 되돌려주는 능력이 필요하기 때문이다.아래의 코드를 봅시다.

const o = new Observable();
const o2 = new Observable();

function fakeApi(param) {
  setTimeout(() => {
    o.emit(1);
    o.emit(2);
    o.emit(3);
  }, 1000);
}

fakeApi();
o.pipe(o2);

o2.subscribe(
  pipe(
    double,
    double,
    printFunction
  )
);

Observable 현재 다른 관찰할 수 있는 o에 연결됩니다.o2

I will print the 4 
I will print the 8 
I will print the 12 

멋있죠?좋아, 우리 그것을 한 단계 향상시키자.이제 우리는 관찰할 수 있는 조작부호를 실현하려고 시도할 것이다.만약 당신이 Rx의 공식 서류를 보러 가면.너는 outputs의 정확한 정의를 발견할 수 있을 것이다.
https://rxjs-dev.firebaseapp.com/api/operators/map

In brief map is a function that takes in a function as parameter applies that function and returns a new observable.

만약 네가 아래의 그림을 본다면, 그것은 더욱 의미가 있다.

class Map {
 constructor(func) {
   this.observable = new Observable();
   this.func = func;
 }
 subscribe(cb) {
   this.observable.subscribe(cb);
 }
 emit(x) {
   const val = this.func(x)
   return this.observable.emit(val);
 }
}

우리는 map라는 클래스를 만들었다.구조 함수에서 우리는 새로운 map 을 시작하고 전송된 함수 Map 를 저장합니다.Observable 에서 우리는 특정한 func 을 구독했다.마지막으로 subscribe 함수에서 우리는 observable과paramemit을 응용하고 우리가 시작한 관찰 대상this.fun을 되돌려준다.x는 JavaScrip의 키워드이기 때문에 지도를 하나의 대상에 봉인해야 합니다.우리 이렇게 합시다.

const Rx = {};
Rx.map = f => new Map(f);

여기에서 우리는 빈 대상emit을 만들고 키map를curried 함수로 설정합니다. 이 함수는 전달된 함수 초기화Rx 대상을 사용합니다.이제 우리는 아래의 지도를 사용할 수 있는데,

let c = o.pipe(Rx.map(v => v * -3));
c.subscribe(
  pipe(
    double,
    printFunction
  )
);

어떤 출력

I will print the -6 
I will print the -12 
I will print the -18 

여기 있습니다.우리는 지금 자신의 매핑 방법이 생겼다.유사한 방식으로 우리는 map 연산자에 대해 역방향 공정을 진행할 수 있다.new Map() 문서를 보고 어떻게 작동하는지 봅시다.
http://reactivex.io/documentation/operators/filter.html

이 그림은 우리에게 그 기능의 더욱 넓은 시각을 제공했다.함수의 맵과 유사합니다.유일한 차이점은 그것이 비교 함수라는 것이다.그럼 우리가 그것을 구축합시다.

class Map {
  constructor(func) {
    this.observable = new Observable();
    this.func = func;
  }
  subscribe(cb) {
    this.observable.subscribe(cb);
  }
  emit(x) {
    const val = this.func(x);
    return this.observable.emit(val);
  }
}
//...
Rx.map = f => new Map(f);

우리가 예전처럼 그것을 운행할 때

let c = o.pipe(Rx.filter(v => v > 0));
c.subscribe(
  pipe(
    double,
    printFunction
  )
);

// output
I will print the 4 
I will print the 6 

나는 네가 지금 하나의 패턴을 볼 수 있기를 바란다.filter 연산자는 일부 임무를 수행하는 함수일 뿐, 우리는 그것들을 분해할 수 있다.
나는 이 문장이 유익하길 바란다. 평론을 남기고, 좋아하고, 공유하고, 나를 따라라. 만약 당신이 더 많은 문장을 보고 싶다면.
🚀🚀🚀🚀🚀🚀