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
2. 胡⽴立 Hu Li • 東南亞新創公司 Eatigo Frontend Team Lead • TechBridge Weekly 技術週刊編輯 
 致⼒力於淺顯易懂的程式教學，搞不好你看過我的⽂文章 • [⼼心得] ⼗十年程式⾃自學之路 • 零基礎的⼩小明要如何成為前端⼯工程師？ • 跟著⼩小明⼀一起搞懂技術名詞：MVC、SPA 與 SSR • 資料庫的好夥伴：Redis • 讓我們來談談 CSRF • 希望是最淺顯易懂的 RxJS 教學 aszx87410@gmail.com
3. 開始之前 4⽉月底 RxJS 5 => RxJS 6
 6⽉月底 redux-observable v0.x => v1.0.0 由於概念不變，簡報中舉的例⼦子都是
 RxJS5 + redux-observable v0.x
4. 什麼是 ReactiveX?
5. 與其讓我告訴你那是什麼 不如你⾃自⼰己體會
6. ⼩小試⾝身⼿手 現在有⼀一個陣列，裡⾯面每個元素都是⾃自然數
 請你把奇數挑出來，並且平⽅方之後加總
7. const solution = arr => {
 let ans = 0
 for(let i=0; i<arr.length; i++){
 if (i%2) {
 ans += i*i
 }
 }
 return ans
 }
8. 有沒有其他解法？
9. const solution = arr => {
 return arr
 .filter(val => val % 2)
 .map(val => val * val)
 .reduce(
 (total, val) => total + val
 )
 }
10. const solution = arr => {
 let ans = 0
 for(let i=0; i<arr.length; i++){
 if (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
 )
 }
11. const solution = arr => {
 let ans = 0
 for(let i=0; i<arr.length; i++){
 if (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 累
12. const solution = arr => {
 let ans = 0
 for(let i=0; i<arr.length; i++){
 if (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 聲明式 告訴電腦：我想要什麼
13. ⼩小試⾝身⼿手 現在有兩堆資料 orders 跟 members
 請找出⾦金額 > 100 且 id > 10 的資料
 並且加上會員資料⼀一併回傳
14. const solution = (orders, members) => {
 const ans = []
 for(let i=0; i<orders.length; i++){
 if (orders[i].amount > 100 && orders[i].id > 10) {
 ans.push({
 order: orders[i],
 member: members[orders.memberId]
 })
 }
 }
 return ans
 } Imperative 命令式 什麼東⻄西都⾃自⼰己來，⼼心 hen 累
15. const solution = (orders, members) => {
 const ans = []
 for(let i=0; i<orders.length; i++){
 if (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 聲明式 告訴電腦：我想要什麼
16. 其實你早就學過 Declarative
17. const solution = (orders, members) => {
 const ans = []
 for(let i=0; i<orders.length; i++){
 if (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 聲明式 告訴電腦：我想要什麼
18. 把資料經過⼀一連串轉換
 得出想要的結果
19. 1 2 3 4 5 6
20. 1 2 3 4 5 6 filter (取奇數)
21. 1 2 3 4 5 6 filter (取奇數) 1 3 5
22. 1 2 3 4 5 6 filter (取奇數) 1 3 5 map (平⽅方)
23. 1 2 3 4 5 6 filter (取奇數) 1 3 5 map (平⽅方) 1 9 25
24. 1 2 3 4 5 6 filter (取奇數) 1 3 5 map (平⽅方) 1 9 25 reduce (加總)
25. 1 2 3 4 5 6 filter (取奇數) 1 3 5 map (平⽅方) 1 9 25 reduce (加總) 35
26. 重點⼀一
 
 把資料經過⼀一連串轉換
 得出想要的結果
27. Reactive
 反應、反應性的
28. window.addEventListener(
 'click',() => { console.log('click!') }
 )
29. 重點⼆二
 當某事發⽣生，我能做出反應
30. 1. 某事發⽣生，我能做出反應
 2. 把資料經過轉換得出答案
31. Rx.Observable.fromEvent(window, 'click')
 .map(e => e.target)
 .subscribe(value => { console.log(‘click!’, value) }
 )
32. Rx.Observable.fromEvent(window, 'click')
 .map(e => e.target)
 .subscribe(value => { console.log(‘click!’, value) }
 ) 當某事發⽣生，我能做出反應
33. Rx.Observable.fromEvent(window, 'click')
 .map(e => e.target)
 .subscribe(value => { console.log(‘click!’, value) }
 ) 把資料經過轉換
34. Rx.Observable.fromEvent(window, 'click')
 .map(e => e.target)
 .subscribe(value => { console.log(‘click!’, value) }
 ) 得出我想要的答案
35. Rx.Observable.fromEvent(window, 'click')
 .map(e => e.target)
 .subscribe(value => { console.log(‘click!’, value) }
 )
36. Observable 可被觀察的
 
 可以想成 stream 資料流
 會隨著時間增加元素的陣列
37. Rx.Observable.fromEvent(window, 'click')
 .map(e => 1)
 .scan((total, val) => total + val)
 .subscribe(value => { console.log(‘click!’, value) }
 )
38. click map scan (加總)
39. click map scan (加總) 1
40. click map scan (加總) 1 1
41. click click map scan (加總) 1 1
42. click click map scan (加總) 1 1 1
43. click click map scan (加總) 1 1 1 2
44. click click click map scan (加總) 1 1 1 2
45. click click click map scan (加總) 1 1 1 1 2
46. click click click map scan (加總) 1 1 1 1 2 3
47. RxJS 的威⼒力所在：組合技

48. 兩個陣列合併會變什麼？
49. [1, 2, 3] 跟 [4, 5, 6]
 
 串接：[1, 2, 3, 4, 5, 6]
 相加：[5, 7, 9]
50. 兩個 Observable 合併會變什麼？
51. 兩個 Observable 合併會變什麼？ 會隨著時間增加元素的陣列
52. 10 40 7 30 5 merge 10 40 7 30 5
53. 可以把兩個資料流合併！
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
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
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
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
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
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
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
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
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
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
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
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
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)
 })
67. RxJS 與 Promise
68. 當某事發⽣生，我能做出反應
69. 當某事發⽣生，我能做出反應 當 Promise 完成時
70. function getData() {
 return fetch('http://example.com/api')
 .then(res => res.json()) 
 }
 
 Rx.Observable.fromPromise(getData())
 .subscribe(response => { console.log(response) }
 )
71. Rx.Observable.fromEvent(window, 'click')
 .map(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) })
72. Rx.Observable.fromEvent(window, 'click')
 .map(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) })
73. click Rx.Observable.fromEvent(window, 'click')
 .map(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) })
74. click Rx.Observable.fromEvent(window, 'click')
 .map(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) }) click Observable response
75. [[1, 2], [3, 4, 5], [6], 7]
 想把陣列壓平怎麼辦？
76. _.flatten(arr)
77. click Rx.Observable.fromEvent(window, 'click')
 .map(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) }) click Observable response
78. click Rx.Observable.fromEvent(window, 'click')
 .flatMap(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) }) click response
79. click Rx.Observable.fromEvent(window, 'click')
 .flatMap(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) }) click response click
80. click Rx.Observable.fromEvent(window, 'click')
 .flatMap(e =>
 Rx.Observable.fromPromise(getData())
 )
 .subscribe(response => { console.log(response) }) click response click response
81. mergeMap(flatMap)
 concatMap
 switchMap
82. mergeMap 很簡單，就是 parallel
83. mergeMap 很簡單，就是 parallel click request
84. mergeMap 很簡單，就是 parallel click request request
85. mergeMap 很簡單，就是 parallel click request request request
86. mergeMap 很簡單，就是 parallel click request response request request
87. mergeMap 很簡單，就是 parallel click request response request request response
88. mergeMap 很簡單，就是 parallel click request response request response request response
89. mergeMap 很簡單，就是 parallel
 response 順序不代表 request 的順序 click request response request response request response
90. mergeMap 可以限制 concurrency 數量
 假設設定為 1
91. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request
92. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request response
93. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request response request
94. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request response request response
95. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request response request response request
96. mergeMap 可以限制 concurrency 數量
 假設設定為 1 click request response response request response request
97. concatMap 執⾏行完⼀一個才會執⾏行下⼀一個
 就是 mergeMap(… , 1) click request response response request response request
98. switchMap 只取最後⼀一個 request 的 response
 是很常⽤用的⼀一個⽅方法 click request response response request response request
100. A 餐廳
101. A 餐廳 回上⼀一⾴頁
102. A 餐廳 回上⼀一⾴頁 B 餐廳
103. ⾮非同步的問題 假設 A 的 response 花了 3 秒
 B 的 response 只花了 1 秒
104. ⾮非同步的問題 假設 A 的 response 花了 3 秒
 B 的 response 只花了 1 秒 mergeMap：1 秒後顯⽰示 B，3 秒後顯⽰示 A
105. ⾮非同步的問題 假設 A 的 response 花了 3 秒
 B 的 response 只花了 1 秒 mergeMap：1 秒後顯⽰示 B，3 秒後顯⽰示 A
 concatMap：3 秒後顯⽰示 A，4 秒後顯⽰示 B

106. ⾮非同步的問題 假設 A 的 response 花了 3 秒
 B 的 response 只花了 1 秒 mergeMap：1 秒後顯⽰示 B，3 秒後顯⽰示 A
 concatMap：3 秒後顯⽰示 A，4 秒後顯⽰示 B
 switchMap：1 秒後顯⽰示 B
107. ⾮非同步的問題 假設 A 的 response 花了 3 秒
 B 的 response 只花了 1 秒 mergeMap：1 秒後顯⽰示 B，3 秒後顯⽰示 A
 concatMap：3 秒後顯⽰示 A，4 秒後顯⽰示 B
 switchMap：1 秒後顯⽰示 B 很常⽤用的原因：只要管最新的 request
108. Redux 與 RxJS
109. 核⼼心概念：action in, action out
 在 middleware ⽤用 RxJS 解決⼀一切 redux-observable Action
 getUser middleware epic Action
 setUser API Server
110. redux-observable
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
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
113. 與其他 Middleware 的⽐比較
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
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)) ) } }
116. 與 redux-observable 類似，都是 dispatch pure action
 其餘的讓 saga 去處理 redux-saga Action
 getUser middleware saga Action
 setUser API Server
117. 監聽指定的 action，並且丟給 worker 處理 watcher function* watcherSaga() { yield takeLatest("GET_USER", fetchUser) } takeLatest：只拿最後⼀一個（switchMap）
 takeEvery：每個都拿（mergeMap）
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)) } }
119. 簡單⽐比較 promise thunk saga observable 學習難度 ☆ ☆☆ ☆☆☆☆☆ ☆☆☆☆☆ Action 型態 Promise Function Object Object ⾮非同步
 流程管理 X X O O ⽅方便測試 X X O O
120. RxJS 與各種複雜情境
121. 情境⼀一：巢狀 API /api/posts/:id
 /api/posts/:id/translations
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]
 })
 )
 )
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]
 })
 )
 )
124. 情境⼆二：call 兩個 API /api/posts/:id
 /api/users/:id
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
 })
 )
 ) 
 )
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
 })
 )
 ) 
 )
127. 情境三：call ⼀一⼤大堆 API /api/posts
 /api/users/:id
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)
 )
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)
 )
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)
 )
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)
 )
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)
 )
133. Q&A aszx87410@gmail.com
 https://medium.com/@hulitw