Redux × TypeScript × Flux Standard Action(FSA) について調べてみた
じょじょに下火になりつつ Redux ですが、とはいえまだまだ需要が高いのも事実な Redux です。
なかなかやっかいな Redux ですが、きちんと使えばとても有用な技術であるのもまた事実です。
GraphQL の出現によりかなり影が薄くなりつつありますが、今更ながらしっかりと調べてみました。
そもそも FSA とは
要するに、各々の action で共通な標準の形を持とうって考え方みたいです。
Redux と TypeScript と FSA を組み合わせる意味とは
Redux に FSA の考え方を導入するのは至極自然な流れだと思います。
で、TypeScript で action の形が FSA に沿っているか判断できるってことだと思います。
JavaScript だと型がないので、そこまで判断できないわけですね。
外部パッケージを使う意味とは
素の Redux でも何ら問題ないのですが、
- ちゃんと FSA に沿っているか
- 毎回 payload とか書くのが面倒
といった理由で、パッケージを導入しているところが多いイメージがあります。(脳死で導入しているところも多いですが)
外部パッケージを導入すると、強制的に FSA に沿った形で action が作られるため、reducer や store 、saga などが FSA に沿った形で作られるという点も見逃せないです。
端的に言うならば、型を作るのが楽になるという認識で良いと思います。
外部パッケージの一部
自分が把握しているのは以下の 2 つです。
typesafe-actionsは v5 の開発が止まっており、ドキュメントも微妙なとこも多いです。
typescript-fsaはシンプルゆえ、typesafe-actionsほど型のサポートが強くないです。
現時点で個人的に使うとしたらtypesafe-actionsの v4 かtypescript-fsaかなーと。
正直、素のreduxも型はちゃんとつけられるので、問題はないと思います。
時間ができたら各々のサンプルを書いていきたいなーと思いつつです。