【ガチ初心者】Reduxのディレクトリ構成　３種😀

Reduxでサイト作った見たけどなんかフォルダがごっちゃになっちゃった...
っていう人向けです😀

Reduxのディレクトリ構成には、主に３種類あります。

ディレクトリ構成とは？
超ざっくり言うと　ファイル・フォルダの分け方

この３つ！　特徴も説明すると

1. redux-way　　👉　ぶっちゃけ使わない...😢(多分)
2. ducks　　　　 👉　小規模開発で使う！😁
3. re-ducks　 　👉　中・大規模で使う！😁

１つずつ説明していきます

---

redux-way

「reduxによって導入される概念」事に分ける

「reduxによって導入される概念」とは
Actions、Reducersとかです

多いパターンとして、下記のようにディレクトリを設けます。

• components
• containers
• reducers
• actions(action creater)
• types(action type)

例えばこんな感じ

ファイル

src/
├ components
|   ├ component1.js
|   └ component2.js
├ containers
|   ├ component1.js
|   └ component2.js
├ reducers(action関係)
|   ├ component1.js
|   └ component2.js
├ actions(action関係)
|   ├ component1.js
|   └ component2.js
└ types(action関係)
    ├ component1.js
    └ component2.js

問題点

Action関係(reducers、action creaters(action)、action types(types))
はまとめた方が分かりやすいですよね😁
そのまとめたものをDucksと言います

Ducks

redux-wayのAction関連を１つにまとめたやつ

Action関係(reducers、action creaters(action)、action types(types))を
modulesというフォルダにまとめます

• components
• containers
• modules(reducers、actions、typesが含まれている）

例えばこんな感じ

ファイル

src/
├ components
|   ├ component1.js
|   └ component2.js
├ containers
|   ├ component1.js
|   └ component2.js
└ modules(action関係)
    ├ component1.js
    └ component2.js

いい感じにまとまりました🤗

問題点

小規模開発ならいいですが、中・大規模開発になるとmodulesの１個１個のファイルが
めちゃくちゃ大きくなってしまいます😭
そこでmodulesをさらに細かく分けてものをre-ducksと言います

re-ducks

ducksのmodulesを分かりやすく、細かく

modulesをducksという名前に変えて、その中で細かくコンポーネント事に
フォルダを分けていきます

• components
• containers
• ducks(コンポーネント事にフォルダを作る）

例えばこんな感じ

ファイル

src/
├ components
|   ├ component1.js
|   └ component2.js
├ containers
|   ├ component1.js
|   └ component2.js
└ ducks(コンポーネント事に)
    ├ component1
    |   ├ index.js
    |   ├ reducers.js
    |   ├ actions.js
    |   ├ types.js
    |   ├ operations.js
    |   └ selectors.js
    └ component2.js
        ├ index.js
        ├ reducers.js
        ├ actions.js
        ├ types.js
        ├ operations.js
        └ selectors.js

いい感じにまとまりました😁

以上です。