RxJS 퀵스타트 9장

9.1.md

상태 관리 operator (253p)

• 데이터의 상태를 유지하기 위한 방법
• 기존에 반환했던 데이터를 저장했다가 이후 데이터 작업시 첫번째 인자로 전달해줌

operators

• scan
  • http://rxmarbles.com/#scan
  • 데이터가 발생할 때마다 발생
• reduce
  • http://rxmarbles.com/#reduce
  • 하나의 축적된 값을 만들어 complete 되었을 때 한 번 전달

참고

• https://codepen.io/kyungmi-the-bold/pen/WYZevE

9.2.1.withLatestFrom.js

const drag$ = start$.pipe(
  switchMap(start => move$.pipe(
    // 처음 X 좌표에서 이동한 거리를 반환
    map(move => ({ distance: move - start })),
    takeUntil(end$),
  )),
  share(),
);

const drop$ = drag$.pipe(
  switchMap(drag => end$.pipe(
    map(() => drag),
    first(),
  )),
  withLatestFrom(viewWidth$, (drag, size) => ({ ...drag, size })),
);

// {distance: 353, size: 1023}

9.2.2.scan.js

const { merge } = rxjs;

const THRESHOLD = 30;
const PANEL_COUNT = 5;

const carousel$ = merge(drag$, drop$).pipe(
  scan((store, { distance, size } ) => {
    let updateStore = { from: -(store.index * store.size) + distance };
    if (size === undefined) {
      // drag
      updateStore = { ...updatStore, to: updateStore.from };
    } else {
      // drop
      let toBeIndex = store.index;
      if (Math.abs(distance) >= THRESHOLD) {
        toBeIndex = distance < 0 ? Math.min(toBeIndex + 1, PANEL_COUNT - 1) : Math.max(toBeIndex - 1, 0);
      }
      updateStore = { ...updateStore, index: toBeIndex, to: -(toBeIndex * size), size };
    }
    return { ...store, ...updateStore };
  }, { from: 0, to: 0, index: 0, size: 0 }),
);

carousel$.subscribe(v => console.log('캐러셀 데이터', v));

// 캐러셀 데이터 {from: 0, to: 0, index: 0, size: 1023}
// 캐러셀 데이터 {from: -1, to: -1, index: 0, size: 1023}
// 캐러셀 데이터 {from: -8, to: -8, index: 0, size: 1023}
// 캐러셀 데이터 {from: -64, to: -64, index: 0, size: 1023}
// 캐러셀 데이터 {from: -142, to: -142, index: 0, size: 1023}
// 캐러셀 데이터 {from: -236, to: -236, index: 0, size: 1023}
// 캐러셀 데이터 {from: -270, to: -270, index: 0, size: 1023}
// 캐러셀 데이터 {from: -270, to: -1023, index: 1, size: 1023} // drop  시점