React+Rudux项目结构组织的一点思考

最近开始了自己的一个React小项目，用到了React+Redux+React-Router(v4)，由于是纯小白。。项目结构怎么组织成了问题，google一番后看到了这篇文章。

然而。。按照第二种方法来规划项目，太繁琐了。。而且给人一种云里雾里的感觉。于是我去拜读了作者给出的原文链接。

唔。。有一些微小的问题：

1. 有必要在每个文件夹下都添加一个index.js吗？
2. 如何规划功能模块的细粒度呢？
3. router如何配置在哪里配置呢？

问题三至今没有找到好的教程。。RR官网有个集中配置的示例，我觉得对于大型项目比较适合。
我的项目其实很简单，并且使用的是create-react-app，因此我采用以下策略：

1. 所有的项目代码放在src文件夹中（废话。。。）。
2. 不集中配置router，在最顶层的App.jsx中配置顶级路由，其他路由分散到组件中。
3. 将每个顶级路由规划为功能模块，放入modules文件夹。
4. 每个功能模块下有自己的action，reducer，saga，与功能模块同名的.jsx文件，以及一个导出这些api的index.js文件。
5. 功能模块下用containers文件夹分出各个的容器组件。

最终的目录：

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