기본 콘텐츠로 건너뛰기

라벨이 FRP인 게시물 표시

ReactiveX / RxJS - 상태(State)에 대한 두 가지 접근

RxJS, BaconJS, Highland, 등등 정말 Stream 전성시대. FRP( Functional Reactive Programming )가 흥하는 시대를 살고 있는 느낌이다. 기존의 Array에 람다 함수들에 시간 개념이 들어간 정도인데 그렇다면 데이터가 이렇게 흘러가고 있다면 어떻게 상태가 변할때 마다 표현할지 고민하는데 그걸 State Store 라는 걸 사용해서 상태의 변화를 Reduce (Rx에선 scan) 하여 반영한다. 가령 기존의 Control Flow 기반 프로그래밍에선 1. 상태 변수를 생성한다. 2. 이벤트가 발생한다. 3. 이벤트 콜백을 실행하여 상태 변수를 갱신한다. 4. 상태 변수를 UI에 반영한다. 였다면 RxJS같은 Data Flow 기반 프로그래밍에선 1. 이벤트를 발행한다. 2. 이벤트를 상태 변화로 변환(map)한다. 3. 2를 reduce 한 스트림을 구독한다. 4. 3의 스트림이 발생할 때마다 UI에 반영한다. 정도의 차이라고 볼 수 있겠다. 그러니까 오늘의 나는 태어날 때의 나부터 어제의 나까지를 리듀스 한 것이라고 (.....) ... 같은 건 없다. (출처: twitter ) http://jsbin.com/bowumar  에 클릭 카운터를 구현해보았다. let $=(e=>document.querySelector(e)); let approach1=()=>{   let clickStream=new Rx.BehaviorSubject(0);   $("#inc").addEventListener('click',e=>clickStream.next(1));   $("#dec").addEventListener('click',e=>clickStream.next(-1));   clickStream.scan((x,y)=>x+y).subscribe(o=>$("#count...