Rxjs 시작

rxjs 라이브러리를 배우기 시작했습니다. Reactivex는 비동기적인 데이터 흐름을 처리하는 API입니다.
Rxjs는 UI 또는 도메인 이벤트의 변경 사항을 처리하는 데 도움을 줍니다.속성이나 집합이 값을 업데이트할 때 마우스 이동, 단추 클릭, 역 이벤트에 사용할 수 있습니다.
Rxjs에는

관찰자 모드.

교체기 모드.

함수식 프로그래밍.

관찰자 모드
관찰자 모델은 한 대상에서 여러 대상에 대한 의존 관계를 정의하는데 도움이 되며, 그의 상태를 바꾸면 그와 관련된 모든 대상에게 통지한다.
예를 들어 한 텔레비전 채널에서 영화 한 편을 방영하면 텔레비전은 영화를 얻기 위해 구독을 시작할 수 있다.
이 채널은 송신을 중지해야 하며, 구독을 개방한 텔레비전마다 알림을 받거나, 텔레비전은 구독을 취소할 수 있다.

교체 모드
그것은 데이터 수집에서 순서대로 접근할 수 있는 방법을 정의하는 데 도움이 된다.
함수를 사용하여 데이터 사이를 이동할 수 있도록 순서대로 데이터를 얻습니다.
기능, 다음 중 하나, 마지막 또는 현재 대상, 연속 대상 사이를 이동합니다.

함수식 프로그래밍.
데이터나 상태를 수정하지 않고 순수 함수를 만드는 함수 프로그래밍
함수 집합의 기능과 특정한 목표는 부작용이나 변이가 없는 우리의 데이터입니다.한 단편 이야기에서

관찰자는 우리가 변화를 통지하는 것을 돕는다.

교체기는 데이터를 순서대로 이동하는 데 도움이 된다.

함수식 프로그래밍은 데이터를 바꾸지 않고 처리하는 데 도움을 준다.

개발 환경을 설정하다.
나는 Parcel을 패키지로 사용하는데, 이것은 쉽게 개발하는 데 도움이 된다.프로젝트 rxjs-day-1에 디렉터리를 만들고 npn init를 시작하고parcel을 설치합니다.

mkdir rxjs-day-1
cd rxjs-day-1
npm init --y
npm install -g parcel-bundler

색인을 만듭니다.html 및 편집 패키지.json과 into 스크립트 영역은 색인에 새로운 내용을 정의합니다.html 페이지.

"dev": "parcel index.html"

응용 프로그램을 만듭니다.ts 파일을 HTML로 가져옵니다.이 인덱스는 typescript 파일을 처리하는 데 사용됩니다.

    <title>Document</title>
    <script src="app.ts"></script>

rxjs를 설치합니다.

npm install rxjs

npm Run dev 실행 패키지를 사용하여 인코딩할 준비가 되었습니다!

dany@dany-ibm:~/Desktop/learn-rxjs-day-1$ npm run dev

> [email protected] dev /home/dany/Desktop/learn-rxjs-day-1
> parcel index.html

Server running at http://localhost:1234 
✨  Built-in 1.04s.

나의 첫 번째 관찰 대상을 만듭니다.
복권 번호 목록을 보낼 수 있는 관찰 가능한 것을 만들 것입니다.
관찰 대상은 구독자 대상으로 예상된다.그것은 발사 값을 정지하기 위해 '다음' 이나 '완성' 등의 함수를 제공했다.
응용 프로그램을 엽니다.ts와 가져오기는 rxjs에서 관찰할 수 있습니다.새 상수를 정의하고 키워드 new를 매개 변수로 구독 서버의 관찰 대상에 사용합니다.
관찰 가능한 대상의 주체에서 숫자로 그룹을 정의합니다.이것은 맵 그룹 방법을 사용하여suscriber를 호출합니다.next (value) 를 누르고 그룹의 값을 보냅니다.
https://rxjs-dev.firebaseapp.com/guide/observable에서 observable에 대한 더 많은 정보를 보기

import { Observable } from 'rxjs';

const LoteryChannel$ = new Observable((suscriber) => {
  const loteryNumber = [12, 11, 48, 38];
  loteryNumber.map((n) => suscriber.next(n));
});

브라우저에서 당신의 코드를 실행합니다http://localhost:1234. 세상에!!!콘솔에 아무런 내용이 없습니다. 이것은 observable가 구독을 활성화해야 하기 때문입니다.

가입 만들기
구독은subscribe 방법으로observable에서 만들고 구독 대상을 되돌려줍니다.

const tv1 = LoteryChannel$.subscribe((value) => console.log(`tv1 ${value}`));

tv1 구독에서 값을 받아서 컨트롤러에 출력합니다.
브라우저http://localhost:1234를 열고 콘솔의 숫자를 확인합니다.
다른 구독을 만들지만 set Timeout을 사용하면 구독이 시작되면 tv1과 같은 값을 받을 수 있습니다.

setTimeout(() => {
  const tv2 = LoteryChannel$.subscribe((value) => {
    console.log(`tv2 ${value}`);
  });
}, 5000);

구독 정보 더 보기
https://rxjs-dev.firebaseapp.com/guide/subscription

가입을 취소하고 완료합니다.
observable는 데이터 발송을 중지하거나, 우리의 '흐름' 에서 더 많은 데이터를 가져오지 않으려고 구독할 수 있습니다.
Subscription stop은 함수 unsubscribe를 사용하여 observable에서 데이터를 가져옵니다.

const CNNChannel$ = new Observable((sus) => {
  const loteryNumber = [12, 11, 48, 38];
  sus.next("Number starts in 2 seconds");
  setTimeout(() => {
    loteryNumber.map((n) => sus.next(n));
  }, 2000);
});

const tv1 = CNNChannel$.subscribe((value) => console.log(`tv1 ${value}`));
const tv2 = CNNChannel$.subscribe((value) => console.log(`tv2 ${value}`));
setTimeout(() => {
  console.log("tv2 turnoff");
  tv1.unsubscribe();
}, 1000);

만약 사용자가 전체 함수를 호출한다면, 우리의 관찰 대상은 데이터 흐름을 멈출 것입니다.
다음 예시에서, 우리의 구독은 첫 번째next () 만 얻을 수 있습니다.

const CNNChannel$ = new Observable((sus) => {
  const loteryNumber = [12, 11, 48, 38];
  sus.next("Number begin in 2 seconds");
  sus.complete();
  setTimeout(() => {
    loteryNumber.map((n) => sus.next(n));
  }, 2000);
});

Stackbliz에서 최종 버전을 자유롭게 사용할 수 있습니다.

당신은 무엇을 만들 수 있습니까?
이것은 내가 Rxjs로 만든 작은 응용 프로그램이다.이 프로그램에는 '구독' 과 '구독 취소' 단추가 있는 세 개의 상자가 있다.
가시광선은 서로 다른 색깔을 발사한다.컬러 송신기로 3개의 상자가 있으며 상자마다 구독을 하거나 취소할 수 있다.
https://rjxslearn.netlify.app/
사진 작성자Mitchell Kmetz가 Unsplash
이렇게이것은 너에게 Rxjs의 도움을 줄 것이다.만약 네가 이 문장을 좋아한다면 공유해라!