Help us understand the problem. What is going on with this article?

ReactiveXを視覚的に理解できるRxMarblesのすすめ

ReactiveX

最近Flutterを使い始めたのですが、ReactiveXの壁にぶち当たりました。
Flutterには、Blocパターンという設計指針があり、このパターンに従う際には、ReactiveX(Streams + rxdart)の理解が必要になります。しかし、ReactiveXはそこそこ学習コストが高く、いまいち理解できていない方も多いのではないでしょうか?

RxMarbles

RxMarblesはReactiveXのメソッドを視覚的に理解することができるサイトです。
マーブルを動かすことで、それぞれのメソッドの挙動を簡単に理解することができます。

例として、combineLatestを見てみましょう。

combineLatest

combinelatest.gif
https://rxmarbles.com/#combineLatest

上には1,2,3,4,5と流れているObservable(FlutterのStream)があり、下にはA,B,C,Dと並んでいるObservableがあります。

この2つのObservableをcombineLatestで処理すると、3番目の流れが出来上がります。

combineLatestは2つのObservableに対して、それぞれの最新の要素を抽出し、それらの組み合わせを返すメソッドであるということが一目で理解できます。

もう一つ例として、mergeMapをみてみます。

mergeMap

mergeMap.gif

https://rxmarbles.com/#mergeMap
2つのObservableの組み合わせを返すメソッドであることがわかります。また、返されるObservableの間隔は1つ目の間隔と同じであり、開始位置は2つ目と同じになっていることがわかります。

最後に

メソッドの詳細については公式docを読むのが一番だと思いますが、その前にRxMarblesで視覚的に挙動を把握しておくことで、理解しやすくなると思います。
参考になれば幸いです!

Tak0325
React, Typescript, Ruby on Rails, GCP, Spring Boot
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした