Posted at

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

More than 1 year has passed since last update.


問題

redux wayで書いていくと

|_ containers

|_ constants
|_ reducers
|_ actions

とかって大量の登場人物が登場してきてうざい。わかるけど複雑になります。

(ここでいうConstantsはActionの値などの定数の集まりを指します。)


Ducksという考え方

「そこでDucksですよ!」

https://medium.com/@scbarrus/the-ducks-file-structure-for-redux-d63c41b7035c

これを使うと、上記のややこしいのが、

|_ containers

|_ modules

となります。

どういうことかというと、modulesの中の1ファイルにReducer, Action Creator, Constants などをまとめて1ファイルで扱ってしまおう(そしてそれをmodulesとして管理しよう)という解決法になります。


なぜコレが嬉しいのか?

Reduxはfluxの実装として筋がよく、一気に普及しました。

そこで用いられているReducer, Action Creatorなどの登場人物は、役割としては別であるものの実際にはお互いにConstantsで紐付けられていて実質的に密結合です。それぞれ単体では存在しえません。

なので1ファイルで扱ってしまっても不都合はないのです。

ちなみにテストはどう書くかというと、上記の通り登場人物は変わらないため、Reduxの定石通りにReducer, Action Creatorの単位でテストを書くことができます。


まとめ

reduxは最初の取っ掛かりがわかりにくいですが、これを使うともっとシンプルに、管理しやすい設計ができます。

特にデメリットはないので導入することをオススメします。