最近開始了自己的一個(gè)React小項(xiàng)目姐扮，用到了React+Redux+React-Router(v4)絮供，由于是純小白。茶敏。項(xiàng)目結(jié)構(gòu)怎么組織成了問題壤靶，google一番后看到了這篇文章。
然而惊搏。贮乳。按照第二種方法來規(guī)劃項(xiàng)目，太繁瑣了恬惯。向拆。而且給人一種云里霧里的感覺。于是我去拜讀了作者給出的原文鏈接酪耳。
唔浓恳。刹缝。有一些微小的問題：
- 有必要在每個(gè)文件夾下都添加一個(gè)index.js嗎？
- 如何規(guī)劃功能模塊的細(xì)粒度呢颈将？
- router如何配置在哪里配置呢梢夯？
問題三至今沒有找到好的教程。晴圾。RR官網(wǎng)有個(gè)集中配置的示例颂砸，我覺得對于大型項(xiàng)目比較適合。
我的項(xiàng)目其實(shí)很簡單死姚，并且使用的是create-react-app人乓，因此我采用以下策略：
- 所有的項(xiàng)目代碼放在
src文件夾中（廢話。都毒。色罚。）。 - 不集中配置router温鸽，在最頂層的
App.jsx中配置頂級(jí)路由保屯，其他路由分散到組件中。 - 將每個(gè)頂級(jí)路由規(guī)劃為功能模塊涤垫，放入
modules文件夾。 - 每個(gè)功能模塊下有自己的
action竟终，reducer蝠猬，saga，與功能模塊同名的.jsx文件统捶，以及一個(gè)導(dǎo)出這些api的index.js文件榆芦。 - 功能模塊下用
containers文件夾分出各個(gè)的容器組件。
最終的目錄：
src
├── App
│ ├── App.jsx
│ ├── HOC
│ │ ├── index.js
│ │ ├── withLoading.jsx
│ │ └── withLoading.styl
│ ├── modules
│ │ ├── Home
│ │ │ ├── Home.jsx
│ │ │ ├── actions.js
│ │ │ ├── containers
│ │ │ │ ├── HotSongs
│ │ │ │ │ ├── HotSongs.jsx
│ │ │ │ │ └── style
│ │ │ │ │ └── hotSong.styl
│ │ │ │ ├── RecMusic
│ │ │ │ │ ├── RecMusic.jsx
│ │ │ │ │ ├── components
│ │ │ │ │ │ ├── PlayListCell.jsx
│ │ │ │ │ │ ├── RecNewSongs.jsx
│ │ │ │ │ │ ├── RecPlaylist.jsx
│ │ │ │ │ │ └── Song.jsx
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style
│ │ │ │ │ ├── playlistCell.styl
│ │ │ │ │ ├── recMusic.styl
│ │ │ │ │ ├── recNewSongs.styl
│ │ │ │ │ ├── recPlaylist.styl
│ │ │ │ │ └── song.styl
│ │ │ │ └── Search
│ │ │ │ └── Search.jsx
│ │ │ ├── index.js
│ │ │ ├── reducer.js
│ │ │ ├── saga.js
│ │ │ └── style
│ │ │ ├── common
│ │ │ │ └── title.styl
│ │ │ └── home.styl
│ │ ├── Playing
│ │ │ └── Playing.jsx
│ │ └── Playlist
│ │ └── Playlist.jsx
│ ├── reducers
│ │ └── reducers.js
│ ├── sagas
│ │ └── saga.js
│ └── store
│ └── store.js
├── common
│ ├── index.styl
│ ├── mixin.styl
│ └── reset.styl
├── index.js
└── utils
├── createAction.js
├── fetch
│ └── fetch.js
└── index.js
