ソースコードの配置方法を Redux に学ぶ

February 26, 2022

Redux はもう使っていないが、ソースコード配置の考え方はどのプロジェクトでも役に立っているのでここにメモ。

Since Redux is just a data store library, it has no direct opinion on how your project should be structured. However, there are a few common patterns that most Redux developers tend to use:

• Rails-style: separate folders for “actions”, “constants”, “reducers”, “containers”, and “components”
• “Feature folders” / “Domain”-style : separate folders per feature or domain, possibly with sub-folders per file type
• “Ducks/Slices”: similar to domain style, but explicitly tying together actions and reducers, often by defining them in the same file

What should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go?

redux-way （または Rails-style）パターン #

引用のなかで Rails-style として紹介されているもの。一般的に redux-way と呼ばれている。

• 特徴：機能ごとにディレクトリを分ける。
• 課題：関連のあるファイルが分散してしまう。

src/
 ├ actions/
 │  ├ component1.js
 │  └ component2.js
 ├ constants/
 │  ├ component1.js
 │  └ component2.js
 ├ reducers/
 │  ├ component1.js
 │  └ component2.js
 ├ containers/
 │  ├ component1.js
 │  └ component2.js
 └ components/
    ├ component1.js
    └ component2.js

ducks パターン #

引用の中で Ducks/Slices として紹介されているもの。一般的に ducks と呼ばれている。

• 特徴：関連する記述を１つのファイルにまとめる。
• 課題：１ファイルの記述量が過大になってしまう可能性がある。

src/
 └ modules/
    ├ component1.js
    └ component2.js

re-ducks パターン #

引用の中で Feature folders / Domain-style として紹介されているもの。一般的に re-ducks と呼ばれている。

• 特徴：関連する記述を１つのディレクトリにまとめる。index ファイルをエントリポイントとして使う。
• 課題：強いて言えばディレクトリの階層が１段深くなる。

src/
 └ ducks/
    ├ component1
    │ ├ actions.js
    │ ├ index.js
    │ ├ operations.js
    │ ├ reducers.js
    │ ├ selectors.js
    │ └ types.js
    └ component2.js
      ├ actions.js
      ├ index.js
      ├ operations.js
      ├ reducers.js
      ├ selectors.js
      └ types.js

以上 #

最終的には好みも、小規模開発なら ducks パターン、大規模開発なら re-ducks パターンが向いているというのが定説。

私の場合は、基本的に re-ducks パターンを念頭に開発を進め、そこまで分割の必要性を感じなかった一部に ducks パターンを使うのが常。