ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の指針までは示してくれません。 問題は非同期処理をどこに書くのか、どのように書くのか、そしてどこから呼び出すべきか、です。 Reduxを使っていると次のような状況に悩んだことはないでしょうか。
React + Reduxのキレイな世界で肩身の狭い思いをするそれらのコードをどうするべきか。どうやって戦っていけばいいのか。本稿では１つの解決方法としてredux-sagaを紹介します。redux-sagaの概要と基本的な考え方についてじっくり説明し、お馴染みのredux-thunkで実装したときとコードを比較してみます。ちょっとだけ入門的なセットアップ方法やハマリポイントについて述べて、後半は実践的なredux-sagaの使い方を紹介します。
ちなみに公式リポジトリには日本語のREADMEも用意しています。とりあえず使ってみたい！という方は先にそちらに目を通してみてください。
redux-sagaはReduxで副作用を扱うためのMiddlewareです。 ・・・ちょっとこのままでは理解できませんね。このフレーズ、ライブラリの短い説明文でもあるんですが、実はあまり本質を表現できていません。というわけで自分なりの理解と言葉で説明を試みます。
redux-sagaは「タスク」という概念をReduxに持ち込むための支援ライブラリです。 ここで言うタスクというのはプロセスのような独立した実行単位で、それぞれが別々に並行して動作します。redux-sagaはこのタスクの実行環境を提供します。それに加えて非同期処理をタスクとして記述するための道具立てである 「作用（Effects）」 と非同期処理を同期的に書き下す手段も提供してくれます。作用というのはタスクを記述するためのコマンド（命令、プリミティブ）のようなもので、例えば次のようなものがあります。
select: Stateから必要なデータを取り出すput: Actionをdispatchするtake: Actionを待つ、イベントの発生を待つcall: Promiseの完了を待つfork: 別のタスクを開始するjoin: 別のタスクの終了を待つ