Mais conteúdo relacionado
Semelhante a マーブル図で怖くないRxJS (20)
Mais de bitbank, Inc. Tokyo, Japan (20)
マーブル図で怖くないRxJS
- 2. © bitbank inc.
今日話すこと
● 前提
● なぜ怖いのか?
○ パラダイムが違うから
○ どうちがうのか(ざっくり)
○ なにが嬉しいのか
● ゆるくマーブル図で理解してしまう
○ マーブル図の見方
○ Operator, Indexの例
● マーブル図で思考して実装する
○ 実際にプロダクトで使っているフロントエンド RxJS
2
- 6. © bitbank inc.
管理画面にもともとあったコード
6
getAll$ = this.actions$.pipe(
ofType<RequestHttpGetUserInfos>(UserInfoActionTypes.RequestHttpGetUserInfos),
exhaustMap((action) =>
this.apiClient.getUserInfos(action.payload.params).pipe(
map((res) => new RequestHttpGetUserInfosSuccess({ models: res.items })),
catchError((error) => from([new RequestHttpGetUserInfosError(error),
new OpenNotification({ message: getErrorMessage(error) })])),
),
),
);
- 19. © bitbank inc.
Operator, Indexの例 19
forkJoin
https://rxjs-dev.firebaseapp.com/a
pi/index/function/forkJoin
複数のストリームをまとめて最後の値を配列で返すストリームをつくる
- 30. 連続的なAPIリクエストをフロ
ントでハンドリングする
一行で
● 500件のAPIリクエストを一度に行うユース
ケースがあるが負担の平準化のため 50件2
件ずつ送ってレスポンスが返ってきてから次
のリクエストを送りたい
30
1
selects = [1, 2, 3, 4, 5, 6 ]
2 3 4 5 6
[1,2] [3,4] [5,6]
r1
[r1, r2] [r3, r4] [r5, r6]
r2 ,・・・(省略)
[r1, r2] [r1, r2] [r1, r2]
- 31. 連続的なAPIリクエストをフロ
ントでハンドリングする
一行で
● 500件のAPIリクエストを一度に行うユース
ケースがあるが負担の平準化のため 50件2
件ずつ送ってレスポンスが返ってきてから次
のリクエストを送りたい
31
1 2 3 4 5 6
[1,2] [3,4] [5,6]
r1
[r1, r2] [r3, r4] [r5, r6]
r2 ,・・・(省略)
from([1, 2, 3, 4, 5, 6, ])
bufferCount(2)
concatMap(...)
forkJoin(...)
[r1, r2] [r3, r4] [r5, r6]
selects = [1, 2, 3, 4, 5, 6 ]
- 34. © bitbank inc.
WEB
● ReactiveX http://reactivex.io/documentation
○ マーブル図とドキュメント(英語)が充実してる
○ 知らないオペレータとか探すのには重宝する
○ JSに限ったドキュメントじゃない
● RxJS公式リファレンス https://rxjs-dev.firebaseapp.com/api
○ マーブル図とサンプルコードとドキュメント完備(英語)
○ ある程度理解してたら使いやすいがReactiveXのほうが入門向け
本
● Beginner's Guide to RxJS: Functional Reactive Programming in JavaScript (En…
https://www.amazon.co.jp/dp/B077R2RLGW
○ かんたん、はやい、安い、初学者向けKindle本(英語)
ドキュメント 34