redux-sagaをざっくり入門したい

目的

redux-sagaは、redux界で非同期処理とかやるときライブラリとしてデファクト感を醸している。
ただ、なかなかに独自な世界観（主に用語）のあるライブラリだ。
しかも、同じような関心を持ってるredux-thunkみたいな軽量感（コード量的な意味で）もなさそう。
というわけで、いきなりコードレベルで詳細な理解をしようとせずに、まず世界観に慣れたい。
これが目的だ。

前提知識

Reduxに関する知識

redux-sagaはReduxのMiddlewareなので、Reduxがどんな狙いで作られたライブラリなのか、ある程度知っておくと理解が早い。

ジェネレータに関する知識

redux-sagaはyieldやgeneratorといった処理に依存している。
知っているとredux-sagaを使ったコードがなんとなく読める。

redux-sagaとは

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

副作用をイイカンジに管理するためのライブラリ。
sagaってのはロマサガのアレと一緒で『物語』という意味。
副作用を物語として切り出す、という意図なのかな。
でもまあ、意味わかんないね。

副作用って何？って思った人はReduxが何をしようとしているライブラリであるか分かってないと思う。
フロントエンド界の沼というか罠っぽいところなんだけど、周辺なライブラリやソフトウェアが多い＆これらのライブラリを組み合わせたブログやらよく見かけるけど、ここに言及した情報が少ない（あなたの意見ですよね？そうですよ）。
Redux周辺のライブラリなどを一気に理解しようとせず、Reduxの概要を掴んだほうがよさそう。
FluxやReactの役割や登場背景、それ以前の古き良き時代のフロントエンド開発についてを知っておくと、更につまづきがないと思う。文脈大事。

以下の図は https://qiita.com/kuy/items/716affc808ebb3e1e8ac より盗用

登場人物が多くて、それぞれの役割が分からない。

まず、RootSagaという1本の大きなSagaがある。
RootSagaという特別なSagaがあるわけではない。単なるSagaだ。
最初に起動したSaga程度の理解でOK。

Forkという処理で別Sagaを展開しているようだ。
ワーカースレッドみたいなもんかな。

Put,Call,Select,Takeあたりはまるで分からない。
これはEffectという仕組みらしい。
他にもいろいろある。

これらを組み合わせることで、redux本体とのコミュニケーションもイイカンジにできる。
Effectを使えば

• 副作用ある処理をredux-sagaの中で閉じ込めてイイカンジに扱える
• redux-sagaな世界感に沿ってreduxとイイカンジにやり取りできる

ってことかな。

具体的には、Sagaの中でActionを待ち受けたり、何かしらの関数を実行したり、Actionをdispatchしたり…といったReduxなアプリ開発で必要なことができる。

あらためてredux-sagaのロゴを見ると、たしかに上記を的確に図示してるなと思った。

Effectの詳しい内容はドキュメントで。
https://redux-saga.js.org/docs/api/
よく使いそうなEffectについて雑な理解をする。

Take

ReduxのActionを待つ処理
sagaの中で、『APIを叩くActionをトリガーに○○する』といった処理で使われる。

Takeをイイカンジに拡張したTakeEveryやTakeLatestがある。
これらはHelperと呼ばれる。

Put

ReduxのStoreにActionをdispatchする処理

Call

何かしらの関数を実行する処理。
Promiseを返すような関数を投げてもいいし、普通の同期的な関数を投げてもいい。
サンプルや様々なブログなど見てると、APIの呼び出しで使われてる。
もうちょっと深い使い方ありそうだけど、今のところよく分かっていない。

Select

Storeのstateを取得する処理