리액티브 프로그래밍

ReactiveX으로 공식 홈페이지에서 표현은

  ReactiveX is a combination of the best ideas 
    from the Observer pattern, the Iterator pattern, and functional programming

  ReactiveX is a library 
    for composing asynchronous and event-based programs by using observable sequences.

옵저버 패턴, 이터레이터 패턴 그리고 함수형 프로그래밍을 조합한 프로그래밍이라고 생각하면 될 것 같다. 그리고,
여기에 비동기적, 이벤트 기반이다.

리액티브 프로그래밍은 비동이 이벤트를 처리하기 위해서 다음과 같은 객체들을 이용해서 처리한다.

• Observable
• Observer
• Subscription
• Operators
• Subject
• Schedulers

Observable

• 비동기 collections
• Observables are lazy Push collections of multiple values.

pull vs push

• pull
  • 우리가 일반적으로 아는 코드
  • Array 등 iteratable한 객체

const arr = [1,2,3,4,5];

for(let i of arr){
	console.log(i);
}

• push
  • 비동기
  • promise
  • observable

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

Operator

• rxjs에서 많은 유용한 operator
• 순수함수이며 함수형 프로그래밍을 가능하게 해줌
• ex) map, flatmap, switchmap etc..

Subscription

• 보통 Observable.subscribe 후 객체
• 사용 후 버릴 수 있는 객체(직역하면?)
• A Subscription is an object that represents a disposable resource, usually the execution of an Observable.

const observable = interval(1000);
const subscription = observable.subscribe(x => console.log(x));
// Later:
// This cancels the ongoing Observable execution which
// was started by calling subscribe with an Observer.
subscription.unsubscribe();

Subject

• Observable의 특별한 타입 정도라고 보면 된다.

• Observable은 unicast(1:1)이지만 subject는 multicast

  const subject = new Subject();
   
  subject.subscribe({
    next: (v) => console.log(`observerA: ${v}`)
  });
  subject.subscribe({
    next: (v) => console.log(`observerB: ${v}`)
  });
   
  subject.next(1);
  subject.next(2);
  

• subject는 observable, observer

  subject.subscribe({
    next: (v) => console.log(`observerA: ${v}`)
  });
  subject.subscribe({
    next: (v) => console.log(`observerB: ${v}`)
  });
   
  const observable = from([1, 2, 3]);
   
  observable.subscribe(subject);
  

Scheduler

• 동시성을 제어하는 디스패처
• 연산이 발생하는 시점을 조정 가능
• ex) setTimeout, requestAnimationFrame, micro-task-queue

// Schedules work with setInterval. Use this for time-based operations.
let observable = new Observable((proxyObserver) => {
  proxyObserver.next(1);
  proxyObserver.next(2);
  proxyObserver.next(3);
  proxyObserver.complete();
}).pipe(
  observeOn(asyncScheduler)
);
 
let finalObserver = {
  next(x) {
    console.log('got value ' + x)
  },
  error(err) {
    console.error('something wrong occurred: ' + err);
  },
  complete() {
     console.log('done');
  }
};
 
console.log('just before subscribe');
observable.subscribe(finalObserver);
console.log('just after subscribe');

실행 결과
just before subscribe
just after subscribe
got value 1
got value 2
got value 3
done