$30 off During Our Annual Pro Sale. View Details »

ModernWeb 2018 - 輕鬆應付複雜的非同步操作:RxJS + Redux Observable

Huli
January 29, 2023

ModernWeb 2018 - 輕鬆應付複雜的非同步操作:RxJS + Redux Observable

Reactive Programming 近幾年在處理非同步事件上成為顯學,無論是 JavaScript、Java 或是 Swift,都能看到它的蹤影。所以演說的第一部份會介紹 RxJS 的基本概念跟常用的 operator,藉由幾個小範例讓大家看見 RxJS 在處理非同步上的厲害之處。

而 React 作為一套 UI library,在處理 API call 時往往需要依靠 Redux 來做狀態的管理,而搭配的解決方案又有好多種,像是 redux-thunk 或 redux-saga 等等。這次要介紹的 redux-observable 是一套利用 RxJS 來處理非同步 Action 的解決方案,因此第二部分會講到 redux-observable 的基本使用以及核心概念,最後講到如何用 RxJS 處理複雜的 API call。

Huli

January 29, 2023
Tweet

More Decks by Huli

Other Decks in Programming

Transcript

  1. 輕鬆應付複雜的⾮非同步操作
    RxJS + Redux Observable
    Huli

    View Slide

  2. 胡⽴立 Hu Li
    • 東南亞新創公司 Eatigo Frontend Team Lead
    • TechBridge Weekly 技術週刊編輯

    致⼒力於淺顯易懂的程式教學,搞不好你看過我的⽂文章
    • [⼼心得] ⼗十年程式⾃自學之路
    • 零基礎的⼩小明要如何成為前端⼯工程師?
    • 跟著⼩小明⼀一起搞懂技術名詞:MVC、SPA 與 SSR
    • 資料庫的好夥伴:Redis
    • 讓我們來談談 CSRF
    • 希望是最淺顯易懂的 RxJS 教學
    [email protected]

    View Slide

  3. 開始之前
    4⽉月底 RxJS 5 => RxJS 6

    6⽉月底 redux-observable v0.x => v1.0.0
    由於概念不變,簡報中舉的例⼦子都是

    RxJS5 + redux-observable v0.x

    View Slide

  4. 什麼是 ReactiveX?

    View Slide

  5. 與其讓我告訴你那是什麼
    不如你⾃自⼰己體會

    View Slide

  6. ⼩小試⾝身⼿手
    現在有⼀一個陣列,裡⾯面每個元素都是⾃自然數

    請你把奇數挑出來,並且平⽅方之後加總

    View Slide

  7. const solution = arr => {

    let ans = 0

    for(let i=0; iif (i%2) {

    ans += i*i

    }

    }

    return ans

    }

    View Slide

  8. 有沒有其他解法?

    View Slide

  9. const solution = arr => {

    return arr

    .filter(val => val % 2)

    .map(val => val * val)

    .reduce(

    (total, val) => total + val

    )

    }

    View Slide

  10. const solution = arr => {

    let ans = 0

    for(let i=0; iif (i%2) {

    ans += i*i

    }

    }

    return ans

    }
    const solution = arr => {

    return arr

    .filter(val => val % 2)

    .map(val => val * val)

    .reduce(

    (total, val) => total + val

    )

    }

    View Slide

  11. const solution = arr => {

    let ans = 0

    for(let i=0; iif (i%2) {

    ans += i*i

    }

    }

    return ans

    }
    const solution = arr => {

    return arr

    .filter(val => val % 2)

    .map(val => val * val)

    .reduce(

    (total, val) => total + val

    )

    }
    Imperative 命令式
    什麼東⻄西都⾃自⼰己來,⼼心 hen 累

    View Slide

  12. const solution = arr => {

    let ans = 0

    for(let i=0; iif (i%2) {

    ans += i*i

    }

    }

    return ans

    }
    const solution = arr => {

    return arr

    .filter(val => val % 2)

    .map(val => val * val)

    .reduce(

    (total, val) => total + val

    )

    }
    Imperative 命令式
    什麼東⻄西都⾃自⼰己來,⼼心 hen 累
    Declarative 聲明式
    告訴電腦:我想要什麼

    View Slide

  13. ⼩小試⾝身⼿手
    現在有兩堆資料 orders 跟 members

    請找出⾦金額 > 100 且 id > 10 的資料

    並且加上會員資料⼀一併回傳

    View Slide

  14. const solution = (orders, members) => {

    const ans = []

    for(let i=0; iif (orders[i].amount > 100 && orders[i].id > 10) {

    ans.push({

    order: orders[i],

    member: members[orders.memberId]

    })

    }

    }

    return ans

    }
    Imperative 命令式
    什麼東⻄西都⾃自⼰己來,⼼心 hen 累

    View Slide

  15. const solution = (orders, members) => {

    const ans = []

    for(let i=0; iif (orders[i].amount > 100 && orders[i].id > 10) {

    ans.push({

    order: orders[i],

    member: members[orders.memberId]

    })

    }

    }

    return ans

    }
    const solution = (orders, members) => {

    return orders

    .filter(o => o.amount > 100)

    .filter(o => o.id > 10)

    .map(o => ({

    order: o,

    member: members[o.memberId] 

    }))

    }
    Imperative 命令式
    什麼東⻄西都⾃自⼰己來,⼼心 hen 累
    Declarative 聲明式
    告訴電腦:我想要什麼

    View Slide

  16. 其實你早就學過 Declarative

    View Slide

  17. const solution = (orders, members) => {

    const ans = []

    for(let i=0; iif (orders[i].amount > 100 && orders[i].id > 10) {

    ans.push({

    order: orders[i],

    member: members[orders.memberId]

    })

    }

    }

    return ans

    }
    SELECT * FROM orders

    WHERE orders.amount > 100 AND orders.id > 10

    JOIN members ON members.id = orders.memberId
    Imperative 命令式
    什麼東⻄西都⾃自⼰己來,⼼心 hen 累
    Declarative 聲明式
    告訴電腦:我想要什麼

    View Slide

  18. 把資料經過⼀一連串轉換

    得出想要的結果

    View Slide

  19. 1 2 3 4 5 6

    View Slide

  20. 1 2 3 4 5 6
    filter (取奇數)

    View Slide

  21. 1 2 3 4 5 6
    filter (取奇數)
    1 3 5

    View Slide

  22. 1 2 3 4 5 6
    filter (取奇數)
    1 3 5
    map (平⽅方)

    View Slide

  23. 1 2 3 4 5 6
    filter (取奇數)
    1 3 5
    map (平⽅方)
    1 9 25

    View Slide

  24. 1 2 3 4 5 6
    filter (取奇數)
    1 3 5
    map (平⽅方)
    1 9 25
    reduce (加總)

    View Slide

  25. 1 2 3 4 5 6
    filter (取奇數)
    1 3 5
    map (平⽅方)
    1 9 25
    reduce (加總)
    35

    View Slide

  26. 重點⼀一


    把資料經過⼀一連串轉換

    得出想要的結果

    View Slide

  27. Reactive

    反應、反應性的

    View Slide

  28. window.addEventListener(

    'click',() => {
    console.log('click!')
    }

    )

    View Slide

  29. 重點⼆二

    當某事發⽣生,我能做出反應

    View Slide

  30. 1. 某事發⽣生,我能做出反應

    2. 把資料經過轉換得出答案

    View Slide

  31. Rx.Observable.fromEvent(window, 'click')

    .map(e => e.target)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )

    View Slide

  32. Rx.Observable.fromEvent(window, 'click')

    .map(e => e.target)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    當某事發⽣生,我能做出反應

    View Slide

  33. Rx.Observable.fromEvent(window, 'click')

    .map(e => e.target)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    把資料經過轉換

    View Slide

  34. Rx.Observable.fromEvent(window, 'click')

    .map(e => e.target)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    得出我想要的答案

    View Slide

  35. Rx.Observable.fromEvent(window, 'click')

    .map(e => e.target)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )

    View Slide

  36. Observable 可被觀察的


    可以想成 stream 資料流

    會隨著時間增加元素的陣列

    View Slide

  37. Rx.Observable.fromEvent(window, 'click')

    .map(e => 1)

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )

    View Slide

  38. click
    map
    scan (加總)

    View Slide

  39. click
    map
    scan (加總)
    1

    View Slide

  40. click
    map
    scan (加總)
    1
    1

    View Slide

  41. click click
    map
    scan (加總)
    1
    1

    View Slide

  42. click click
    map
    scan (加總)
    1 1
    1

    View Slide

  43. click click
    map
    scan (加總)
    1 1
    1 2

    View Slide

  44. click click click
    map
    scan (加總)
    1 1
    1 2

    View Slide

  45. click click click
    map
    scan (加總)
    1 1 1
    1 2

    View Slide

  46. click click click
    map
    scan (加總)
    1 1 1
    1 2 3

    View Slide

  47. RxJS 的威⼒力所在:組合技


    View Slide

  48. 兩個陣列合併會變什麼?

    View Slide

  49. [1, 2, 3] 跟 [4, 5, 6]


    串接:[1, 2, 3, 4, 5, 6]

    相加:[5, 7, 9]

    View Slide

  50. 兩個 Observable 合併會變什麼?

    View Slide

  51. 兩個 Observable 合併會變什麼?
    會隨著時間增加元素的陣列

    View Slide

  52. 10 40 7
    30 5
    merge
    10 40 7
    30 5

    View Slide

  53. 可以把兩個資料流合併!

    View Slide

  54. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 -1

    View Slide

  55. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    merge
    +1
    -1

    View Slide

  56. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1
    merge
    +1
    -1

    View Slide

  57. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1
    merge
    +1
    +1
    -1

    View Slide

  58. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1
    merge
    +1
    +1
    -1

    View Slide

  59. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1
    merge
    +1 +1
    +1
    -1

    View Slide

  60. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1
    -1
    merge
    +1 +1
    +1
    -1

    View Slide

  61. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1
    -1
    merge
    +1 +1 -1
    +1
    -1

    View Slide

  62. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1 +1
    -1
    merge
    +1 +1 -1
    +1
    -1

    View Slide

  63. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1 +1
    -1
    merge
    +1 +1 +1
    -1
    +1
    -1

    View Slide

  64. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1 +1
    -1 -1
    merge
    +1 +1 +1
    -1
    +1
    -1

    View Slide

  65. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    +1 +1 +1
    -1 -1
    merge
    +1 +1 +1
    -1 -1
    +1
    -1

    View Slide

  66. Rx.Observable.fromEvent(plus, 'click')

    .mapTo(1)

    .merge(

    Rx.Observable.fromEvent(minus, 'click')

    .mapTo(-1)

    )

    .scan((total, val) => total + val)

    .subscribe(value => {
    console.log(‘click!’, value)
    }

    )
    var total = 0
    plus.addEventListener('click', () => {

    total++

    console.log(‘click!’, total)

    })


    minus.addEventListener('click', () => {

    total—

    console.log(‘click!’, total)

    })

    View Slide

  67. RxJS 與 Promise

    View Slide

  68. 當某事發⽣生,我能做出反應

    View Slide

  69. 當某事發⽣生,我能做出反應
    當 Promise 完成時

    View Slide

  70. function getData() {

    return fetch('http://example.com/api')

    .then(res => res.json()) 

    }


    Rx.Observable.fromPromise(getData())

    .subscribe(response => {
    console.log(response)
    }

    )

    View Slide

  71. Rx.Observable.fromEvent(window, 'click')

    .map(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })

    View Slide

  72. Rx.Observable.fromEvent(window, 'click')

    .map(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })

    View Slide

  73. click
    Rx.Observable.fromEvent(window, 'click')

    .map(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })

    View Slide

  74. click
    Rx.Observable.fromEvent(window, 'click')

    .map(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })
    click
    Observable
    response

    View Slide

  75. [[1, 2], [3, 4, 5], [6], 7]

    想把陣列壓平怎麼辦?

    View Slide

  76. _.flatten(arr)

    View Slide

  77. click
    Rx.Observable.fromEvent(window, 'click')

    .map(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })
    click
    Observable
    response

    View Slide

  78. click
    Rx.Observable.fromEvent(window, 'click')

    .flatMap(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })
    click
    response

    View Slide

  79. click
    Rx.Observable.fromEvent(window, 'click')

    .flatMap(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })
    click
    response
    click

    View Slide

  80. click
    Rx.Observable.fromEvent(window, 'click')

    .flatMap(e =>

    Rx.Observable.fromPromise(getData())

    )

    .subscribe(response => {
    console.log(response)
    })
    click
    response
    click
    response

    View Slide

  81. mergeMap(flatMap)

    concatMap

    switchMap

    View Slide

  82. mergeMap
    很簡單,就是 parallel

    View Slide

  83. mergeMap
    很簡單,就是 parallel
    click
    request

    View Slide

  84. mergeMap
    很簡單,就是 parallel
    click
    request request

    View Slide

  85. mergeMap
    很簡單,就是 parallel
    click
    request request request

    View Slide

  86. mergeMap
    很簡單,就是 parallel
    click
    request
    response
    request request

    View Slide

  87. mergeMap
    很簡單,就是 parallel
    click
    request
    response
    request request
    response

    View Slide

  88. mergeMap
    很簡單,就是 parallel
    click
    request
    response
    request
    response
    request
    response

    View Slide

  89. mergeMap
    很簡單,就是 parallel

    response 順序不代表 request 的順序
    click
    request
    response
    request
    response
    request
    response

    View Slide

  90. mergeMap
    可以限制 concurrency 數量

    假設設定為 1

    View Slide

  91. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request

    View Slide

  92. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request
    response

    View Slide

  93. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request
    response
    request

    View Slide

  94. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request
    response
    request
    response

    View Slide

  95. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request
    response
    request
    response
    request

    View Slide

  96. mergeMap
    可以限制 concurrency 數量

    假設設定為 1
    click
    request
    response response
    request
    response
    request

    View Slide

  97. concatMap
    執⾏行完⼀一個才會執⾏行下⼀一個

    就是 mergeMap(… , 1)
    click
    request
    response response
    request
    response
    request

    View Slide

  98. switchMap
    只取最後⼀一個 request 的 response

    是很常⽤用的⼀一個⽅方法
    click
    request
    response response
    request
    response
    request

    View Slide

  99. View Slide

  100. A 餐廳

    View Slide

  101. A 餐廳
    回上⼀一⾴頁

    View Slide

  102. A 餐廳
    回上⼀一⾴頁
    B 餐廳

    View Slide

  103. ⾮非同步的問題
    假設 A 的 response 花了 3 秒

    B 的 response 只花了 1 秒

    View Slide

  104. ⾮非同步的問題
    假設 A 的 response 花了 3 秒

    B 的 response 只花了 1 秒
    mergeMap:1 秒後顯⽰示 B,3 秒後顯⽰示 A

    View Slide

  105. ⾮非同步的問題
    假設 A 的 response 花了 3 秒

    B 的 response 只花了 1 秒
    mergeMap:1 秒後顯⽰示 B,3 秒後顯⽰示 A

    concatMap:3 秒後顯⽰示 A,4 秒後顯⽰示 B


    View Slide

  106. ⾮非同步的問題
    假設 A 的 response 花了 3 秒

    B 的 response 只花了 1 秒
    mergeMap:1 秒後顯⽰示 B,3 秒後顯⽰示 A

    concatMap:3 秒後顯⽰示 A,4 秒後顯⽰示 B

    switchMap:1 秒後顯⽰示 B

    View Slide

  107. ⾮非同步的問題
    假設 A 的 response 花了 3 秒

    B 的 response 只花了 1 秒
    mergeMap:1 秒後顯⽰示 B,3 秒後顯⽰示 A

    concatMap:3 秒後顯⽰示 A,4 秒後顯⽰示 B

    switchMap:1 秒後顯⽰示 B
    很常⽤用的原因:只要管最新的 request

    View Slide

  108. Redux 與 RxJS

    View Slide

  109. 核⼼心概念:action in, action out

    在 middleware ⽤用 RxJS 解決⼀一切
    redux-observable
    Action

    getUser
    middleware
    epic
    Action

    setUser
    API Server

    View Slide

  110. redux-observable

    View Slide

  111. const getUserEpic = action$ =>
    action$.ofType(actionTypes.GET_USER)

    .switchMap(action => 

    Rx.Observable.fromPromise(API.getUser(

    action.payload.id

    ))

    .map(user => setUser(user))

    .catch(err => Observable.of(getUserError(err)))

    )

    Epic

    View Slide

  112. const getUserEpic = action$ =>
    action$.ofType(actionTypes.GET_USER)

    .switchMap(action => 

    Rx.Observable.fromPromise(API.getUser(

    action.payload.id

    ))

    .map(user => setUser(user))

    .catch(err => Observable.of(getUserError(err)))

    )

    Action in, Action out

    View Slide

  113. 與其他 Middleware 的⽐比較

    View Slide

  114. dispatch ⼀一個 promise,middleware 幫你執⾏行
    redux-promise
    const getUser = id => ({

    type:'GET_USER',

    payload:API.getUser(id)

    })
    middleware
    redux-promise
    GET_USER_PENDING

    GET_USER_FULFILLED

    GET_USER_REJECTED
    API Server

    View Slide

  115. dispatch ⼀一個 function,middleware 幫你執⾏行
    redux-thunk
    const getUser = id => {
    return dispatch => {
    return API.getUser(id).then(
    user => dispatch(setUser(user))
    ).catch(
    err => dispatch(getUserError(err))
    )
    }
    }

    View Slide

  116. 與 redux-observable 類似,都是 dispatch pure action

    其餘的讓 saga 去處理
    redux-saga
    Action

    getUser
    middleware
    saga
    Action

    setUser
    API Server

    View Slide

  117. 監聽指定的 action,並且丟給 worker 處理
    watcher
    function* watcherSaga() {
    yield takeLatest("GET_USER", fetchUser)
    }
    takeLatest:只拿最後⼀一個(switchMap)

    takeEvery:每個都拿(mergeMap)

    View Slide

  118. call API 並且 dispatch 結果
    worker
    function* fetchUser(action) {
    try {
    const user = yield call(

    API.getUser, action.payload.id

    )
    yield put(setUser(user))
    } catch (err) {
    yield put(getUserError(err))
    }
    }

    View Slide

  119. 簡單⽐比較
    promise thunk saga observable
    學習難度 ☆ ☆☆ ☆☆☆☆☆ ☆☆☆☆☆
    Action 型態 Promise Function Object Object
    ⾮非同步

    流程管理
    X X O O
    ⽅方便測試 X X O O

    View Slide

  120. RxJS 與各種複雜情境

    View Slide

  121. 情境⼀一:巢狀 API
    /api/posts/:id

    /api/posts/:id/translations

    View Slide

  122. 情境⼀一:巢狀 API
    /api/posts/:id

    /api/posts/:id/translations
    const epic = action$ =>
    action$.ofType(actionTypes.GET_POST)

    .switchMap(action =>

    Observable.forkJoin(
    Observable.from(API.getPost(id)),

    Observable.from(API.getTrans(id))

    )

    .map(data => Actions.setPost({

    post: data[0],

    translations: data[1]

    })

    )

    )

    View Slide

  123. 情境⼀一:巢狀 API
    /api/posts/:id

    /api/posts/:id/translations
    const epic = action$ =>
    action$.ofType(actionTypes.GET_POST)

    .switchMap(action =>

    Observable.forkJoin(
    Observable.from(API.getPost(id)),

    Observable.from(API.getTrans(id))

    )

    .map(data => Actions.setPost({

    post: data[0],

    translations: data[1]

    })

    )

    )

    View Slide

  124. 情境⼆二:call 兩個 API
    /api/posts/:id

    /api/users/:id

    View Slide

  125. 情境⼆二:call 兩個 API
    /api/posts/:id

    /api/users/:id
    action$.ofType(GET_POST).switchMap(action =>
    Observable.from(API.getPost(action.id))

    .mergeMap(post =>
    Observable.from(API.getUser(post.authorId))

    .map(user => Actions.setPost({

    post,

    user

    })

    )

    ) 

    )

    View Slide

  126. 情境⼆二:call 兩個 API
    /api/posts/:id

    /api/users/:id
    action$.ofType(GET_POST).switchMap(action =>
    Observable.from(API.getPost(action.id))

    .mergeMap(post =>
    Observable.from(API.getUser(post.authorId))

    .map(user => Actions.setPost({

    post,

    user

    })

    )

    ) 

    )

    View Slide

  127. 情境三:call ⼀一⼤大堆 API
    /api/posts

    /api/users/:id

    View Slide

  128. 情境三:call ⼀一⼤大堆 API
    action$.ofType(GET_POSTS).switchMap(action =>
    Observable.from(API.getPosts())

    .switchMap(posts =>

    Observable.of(...posts)

    .mergeMap(item =>

    Observable.from(API.getUser(item.authorId))

    .map(user => ({
    ...item,

    user

    }))

    , 10)

    )

    )

    .toArray()

    .map(posts => Actions.setPost(posts)

    )

    View Slide

  129. 情境三:call ⼀一⼤大堆 API
    action$.ofType(GET_POSTS).switchMap(action =>
    Observable.from(API.getPosts())

    .switchMap(posts =>

    Observable.of(...posts)

    .mergeMap(item =>

    Observable.from(API.getUser(item.authorId))

    .map(user => ({
    ...item,

    user

    }))

    , 10)

    )

    )

    .toArray()

    .map(posts => Actions.setPost(posts)

    )

    View Slide

  130. 情境三:call ⼀一⼤大堆 API
    action$.ofType(GET_POSTS).switchMap(action =>
    Observable.from(API.getPosts())

    .switchMap(posts =>

    Observable.of(...posts)

    .mergeMap(item =>

    Observable.from(API.getUser(item.authorId))

    .map(user => ({
    ...item,

    user

    }))

    , 10)

    )

    )

    .toArray()

    .map(posts => Actions.setPost(posts)

    )

    View Slide

  131. 情境三:call ⼀一⼤大堆 API
    action$.ofType(GET_POSTS).switchMap(action =>
    Observable.from(API.getPosts())

    .switchMap(posts =>

    Observable.of(...posts)

    .mergeMap(item =>

    Observable.from(API.getUser(item.authorId))

    .map(user => ({
    ...item,

    user

    }))

    , 10)

    )

    )

    .toArray()

    .map(posts => Actions.setPost(posts)

    )

    View Slide

  132. 情境三:call ⼀一⼤大堆 API
    action$.ofType(GET_POSTS).switchMap(action =>
    Observable.from(API.getPosts())

    .switchMap(posts =>

    Observable.of(...posts)

    .mergeMap(item =>

    Observable.from(API.getUser(item.authorId))

    .map(user => ({
    ...item,

    user

    }))

    , 10)

    )

    )

    .toArray()

    .map(posts => Actions.setPost(posts)

    )

    View Slide

  133. Q&A
    [email protected]
    https://medium.com/@hulitw

    View Slide