開發環境是使用 create-react-app 建立的。再使用 $ cnpm install rxjs 來安裝即可開始。

$ npx create-react-app my-app
$ cd my-app
$ cnpm install rxjs
$ npm start

my-app/src/index.js

//////////////////////////////////////////////
// demo1：入門
//////////////////////////////////////////////
// import { of } from 'rxjs'
// const source$ = of(1, 2, 3)
// source$.subscribe(console.log)


//////////////////////////////////////////////
// demo2: next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
 

// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.next(2)
//   observer.next(3)
// })
// source$.subscribe({
//   next: item => console.log(item)
// })


//////////////////////////////////////////////
// demo3: 延遲next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
 

//     observer.next(number++)
//     if (number > 3) {
//       clearInterval(handle)
//     }
//   }, 1000)
// })
// source$.subscribe({
//   next: item => console.log(item)
// })



//////////////////////////////////////////////
// demo4: complete
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
 

//     observer.next(number++)
//     if (number > 3) {
//       clearInterval(handle)
//       observer.complete()
//     }
//   }, 1000)
// })
// source$.subscribe({
//   next: item => console.log(item),
//   complete: () => console.log('No More Data')
// })




//////////////////////////////////////////////
// demo5: error
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.error('Someting Wrong')
//   observer.complete()
// })
// source$.subscribe({
//   next: item => console.log(item),
//   error: err => console.log(err),
//   complete: () => console.log('No More Data'),
// })




//////////////////////////////////////////////
// demo6: Observable簡單形式（next、error、complete）
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.error('Someting Wrong')
//   observer.complete()
// })
// source$.subscribe(
//   // next
//   item => console.log(item),          
//   // error，如果不關心錯誤處理，該引數可以用null佔位：source$.subscribe(item => console.log(item), null, complete: () => console.log('No More Data') )
//   err => console.log(err),              
//   // complete
//   () => console.log('No More Data'), 
// )




//////////////////////////////////////////////
// demo7: 退訂Observable
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
//       console.log('in onSubscribe ', number)
//       // 當退訂之後，Observer不會造成任何響應，哪怕本程式依然在執行。
//     observer.next(number++)
//   }, 1000)
//   return {
//       // 退訂的回撥函式
//     unsubscribe: () => {
//       // clearInterval(handle)
//     }
//   }
// })
// const subscription = source$.subscribe(item => console.log(item))
// setTimeout(() => {
//   subscription.unsubscribe()
// }, 3000)




//////////////////////////////////////////////
// demo8： (流)管道 與 map操作符
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// import { map } from 'rxjs/operators'
// const source$ = Observable.create(observer => {
//   observer.next(1)
//   observer.next(2)
//   observer.next(3)
// })
// source$.pipe(map(x => x * x)).subscribe(console.log)




//////////////////////////////////////////////
// demo9： range 指定範圍生成資料
//////////////////////////////////////////////
// import { range } from 'rxjs'
// const source$ = range(1, 100)
// source$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： generate 迴圈建立
//////////////////////////////////////////////
// import { generate } from 'rxjs'
// const source$ = generate(
//   2, // 初始值，相當於for迴圈中的i=2
//   value => value < 10, //繼續的條件，相當於for中的條件判斷
//   value => value + 2, //每次值的遞增
//   value => value * value // 產⽣的結果： 4 16 36 64
// )
// source$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： interval 與 take
//////////////////////////////////////////////
// import { interval } from 'rxjs'
// import { take, map } from 'rxjs/operators'
// 每一秒吐出從0開始的索引
// const source$ = interval(1000)
// const result$ = source$.pipe(map(x => x + 1), take(4))
// result$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： timer 與 take
//////////////////////////////////////////////
// import { timer } from 'rxjs'
// import { take } from 'rxjs/operators'
// // 3秒之後，每個1秒吐出（從0開始）
// const numbers$ = timer(3000, 1000);
// numbers$.pipe(take(4)).subscribe(x => console.log(x));



//////////////////////////////////////////////
// demo11: from 可把⼀切轉化為Observable
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const source$ = from([1, 2, 3]);
// source$.subscribe(console.log)


//////////////////////////////////////////////
// demo12: fromPromise 非同步處理的交接
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const promise = Promise.resolve('good');
// // const promise = Promise.reject('oops');
// const source$ = from(promise);
// source$.subscribe(
//   console.log,  // good
//   error => console.log('catch', error),  // 如果解釋reject則會輸出 oops
//   () => console.log('complete')  // complete
// );


////////////////////////////////////////////////////////////
// demo13: fromEvent 把DOM中的事件轉化為Observable物件中的資料
// <button id="button">button</button>
// <div id="text"></div>
////////////////////////////////////////////////////////////
// import { fromEvent } from 'rxjs'
// let clickCount = 0;
// const event$ = fromEvent(document.querySelector('#button'), 'click');
// event$.subscribe(
//   () => {
//     document.querySelector('#text').innerText = ++clickCount
//   }
// );