リモートワークを便利にするWebアプリRee⑥~フロントエンド構成Ducks~

前回まででバックエンド側の基礎ができたので、今回からフロントエンドに取り掛かります。

JavaScriptフレームワークはいろいろありますが、Reactにしました。

Reactを使う上で状態管理やバケツリレーが大変なので、Reduxを使ったりしますが、今回はDucksを取り入れてみました。

参考ブログ

Reduxのファイル構成は『Ducks』がオススメ

参考ブログでも書かれているようにReduxではactionsやreducerなどファイル構成が複雑になり、どんどんファイル数も増えていってしまいます。

そこで、Ducksという考え方を取り入れて、actionsやreducerはmodules以下にまとめて管理してしまおうというものです。

実際にこのDucksのファイル構成にしてみたところ、最初はやはり書き換えに慣れないですが、全体的にファイルがスッキリして見やすくなったと思います。Reduxの構成を見直すだけなので、とくに新しいライブラリや記述が必要なわけでもなく、コード量が少ないうちは簡単に移行できます。

このDucks積極的に取り入れて行こうと思います。