redux-thunk と redux-saga の違いについて @kuy に聞いた。

きっかけはこの Tweet だ。この Tweet からの会話で聞いている。

redux-thunkは使わない方がいい。あれはやばい。

— Yuki Kodama (@kuy) 2016年5月7日

ぼくの両者の事前知識・経験としては、redux-thunk はすこし使った程度で、redux-saga は README を眺めた程度だ。どちらも非同期処理を含む副作用を処理できる redux の middleware という理解だ。ちなみに redux もすこし使った程度でしかなく、middleware をつくったことはない。

redux-thunk は Action Creator への引数をくるんだ closure "thunk" を redux で処理できるようにする middleware だ。 thunk の意味どおり「引数をくるんだ closure 」だ。

redux-saga は redux に投げ込まれた Action を処理できる "saga" をつくれるようにする middleware だ。 saga の意味どおりだ。「 Command/Event を基盤にした Architecture において Command を受けて実行される Task や、Command/Event を処理する Process 」だ。これは『 .NET のエンタープライズアプリケーションアーキテクチャ (naa4e) 』(2016-04-27) でも書かれている (どちらも Dino Esposito だ) 。

一連の Tweet からぼくが理解したこと。

redux-saga における saga は generator function 。一連の非同期処理などに Command Pattern を適用した Command Object である "effect" の iterator を返す。Command Pattern の適用には import ... from 'redux-saga/effects'; で redux-saga から提供される helper を使う。

「 redux-saga は test が容易」というのは上記の Effect という Command Object を test することで一連の処理の流れを test できるからのようだ。次の Tweet にある実装例を見ると理解しやすい。

API呼び出しをするSaga https://t.co/LyCOGxcA4D これのテストはたったこれだけ https://t.co/csx1aHI73h

— Yuki Kodama (@kuy) 2016年5月7日

redux-saga の欠点としては generator function を要求するので、現状の Web browser で transpile なしに実行するのが難しいところだろうか。

ぼくは redux-saga を採用するかの考慮すべき点を次のようにまとめたい。

• Action に一連の処理を含めることを嫌うか → Saga として分離したいか
• thunk を Action として扱うことを嫌うか
• generator function のための transpile を許容できるか
• redux-saga の effect の helper の学習を許容できるか