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。

Transcript

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

   View Slide

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

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

   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
     aszx87410@gmail.com

     https://medium.com/@hulitw
     

     View Slide