Redux × TypeScript × Flux Standard Action(FSA) について調べてみた

2020-04-14

じょじょに下火になりつつ Redux ですが、とはいえまだまだ需要が高いのも事実な Redux です。

なかなかやっかいな Redux ですが、きちんと使えばとても有用な技術であるのもまた事実です。

GraphQL の出現によりかなり影が薄くなりつつありますが、今更ながらしっかりと調べてみました。


そもそも FSA とは

flux-standard-action

要するに、各々の 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も型はちゃんとつけられるので、問題はないと思います。


時間ができたら各々のサンプルを書いていきたいなーと思いつつです。

© 2018 kk-web