個人的React周りベストプラクティス⑤ - Reduxディレクトリ構成編

#前の記事
前回：個人的React周りベストプラクティス④ - Lamdaパッケージ編
一番始め：個人的React周りベストプラクティス① - 構成編

#ディレクトリ構成

src
├ actions
│   ├ hogeHoge.js             hogeHogeのcreateAction
│   └ fugaFuga.js             fugaFugaのcreateAction
│
├ components
│   ├ App                     グローバルメニューを表示したり、ルーティングを設定したりするファイルが入ったディレクトリ
│   │  └ App.js
│   ├ HogeHoge
│   │  ├ HogeHoge.js          hogeHogeのPresentaionalのルートコンポーネント（１ページにつき１つ）
│   │  └ HogeHogeContainer.js hogeHogeのContainer Component（１ページにつき１つ）
│   └ FugaFuga
│      ├ FugaFuga.js          fugaFugaのPresentaionalのルートコンポーネント（１ページにつき１つ）
│      └ FugaFugaContainer.js fugaFugaのContainer Component（１ページにつき１つ）
│
├ constants
│   ├ common.js               共通で使う定数
│   ├ hogeHoge.js             hogeHogeでのみ使う定数
│   └ fugaFuga.js             fugaFugaでのみ使う定数
│
├ css
│   ├ common.css              共通で使うCSS
│   ├ hogeHoge.css            hogeHogeでのみ使うCSS
│   ├ fugaFuga.css            fugaFugaでのみ使うCSS
│   └ reset.css               リセットCSS
│
├ lib                         ライブラリディレクトリ
│
├ reducers
│   ├ index.js                すべてのReducerをcombineReducersで１つのReducerにまとめるファイル
│   ├ hogeHoge.js             hogeHogeのReducer
│   └ fugaFuga.js             fugaFugaのReducer
│
└ index.js

##簡略図
Reducer、createAction、コンポーネントはドメイン毎にわける

1ページに付き1つのContainer Componentが存在し、1つのPresentaional Componentと紐づく
その下はツリー構造で作る

#Container ComponentとPresentaional Component
JSXを書くのはPresentaional Component、createActionとPresentaional Componentの橋渡しをするのがContainer Componentである。
そのため、Container ComponentにJSXは書かない。

また、bindActionCreatorsを使用しているため、createActionを増やす度にContainer Componentを修正する必要がなく、一度ファイルを作ってしまえば変更することはない。

Container_Componentの例（どのファイルもほぼ同じ　import部分とstateの中身のみ変えてコピペ）

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import Component from './HogeHoge';
import * as Actions from './../../actions/hogeHoge';


const mapStateToProps = (state) => (state.HogeHoge);

const mapDispatchToProps = (dispatch) => (bindActionCreators(Actions, dispatch));


const Container = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Component);

export default Container;

#次の記事
個人的React周りベストプラクティス⑥ - 開発編