redux-observable
redux-observable
redux-observable は、redux の ActionDispatcher → Reducer の流れに加えて、「 Action の Stream 」を提供するライブラリ
以後、Action の Stream をAction$と呼ぶ
https://gyazo.com/ab103d87875395ee1fbb06dc36d47810
teramotodaiki.iconのイメージ。redux-observable が Dispatcher から Action を受け取り、pipe-able な流れを作っている
dispatch(action) された action は、 reducer にも流れるし、Action$ にも流れる
特徴として、単にストリームに変換するのではなく、最下流まで流れてきた Action を最上流に流している(図の矢印)
そのため、単にストリームを map して流すだけで簡単に無限ループを引き起こす
非同期でコールされるため、スタックを破壊することなく、安全に無限ループする。非常に厄介
無限ループ防止のため、 mergeMap(() => NEVER) する(これがベストプラクティスなのかは不明)
Action$ を pipe する処理の単位
全ての Epic は combineEpics によって並列にマージされ、最終的には1つの合成 Epic として扱われる
https://gyazo.com/b60465374ae6bc8426d4ed8fdb73bc2a
Epic が上流の Action とは異なる Action を下流に流すと、その Action も Dispatch されて、 Reducer に届く
Epic によって流された Action は、全て Reducer に届けられる
Epic を subscribeしてはならない(と、ドキュメントに書いてある)
通常の Epic は、最初に Action$ をフィルタすることで、特定の Action に対してのみ処理を加えるようにする
これを利用すると、あたかも Epic が直列に繋がっているかのような処理が書ける
e.g. ◯ を受け取って × を流す Epic と、 × に対してのみ処理を行う Epic を combine する
https://gyazo.com/e863bb6cf500c033c608fcda44653679
赤線が実際の流れ、蛍光ペンで引いたラインが、あたかも直列に繋がっているかのように見える流れ方
上記の図はかなり簡略化して書いていて、実際にはもう1つ、「State のストリーム」(青線)も流れている
以後State$と呼ぶ
https://gyazo.com/ab308f8984147241bb87ab03f015376f
Action$とState$はマージされておらず、独立したストリームとして Epic に渡される
例えるなら、カランのお湯と冷水で蛇口が分かれているようなもの
Epic は赤線だけを pipe することも出来るし、青線だけを pipe することも出来るし、赤線と青線を組み合わせて pipe することもできる
State$ には value というプロパティが生えていて、直前のスナップショットの参照を持っている
所管
ぶっちゃけState$は冗長だと思うteramotodaiki.icon
実際、state$.value (直前のスナップショット)しかほとんど使わない
セレクタのようなものだと思ってストアの変更を監視してネクストアクションを定義するのもアリだと思うが、もはや別ライブラリでは?と思う
Action$にあまり流しすぎる(例えば 10ms に1回流す)とパフォーマンスが悪いから、Action$を減らせるようにState$を提供しているのだろうか?