如何合理布置React/Redux的目录结构？

Question

如何合理布置React/Redux的目录结构

Answer 1

这种结构谐在让程序更容易扩展
├── src                      # 程序源文件
│   ├── main.js              # 程序启动和渲染
│   ├── components           # 全局可复用的表现组件(Presentational Components)
│   ├── containers           # 全局可复用的容器组件
│   ├── layouts              # 主页结构
│   ├── store                # Redux指定块
│   │   ├── createStore.js   # 创建和使用redux store
│   │   └── reducers.js      # Reducer注册和注入
│   └── routes               # 主路由和异步分割点
│       ├── index.js         # 用store启动主程序路由
│       ├── Root.js          # 为上下文providers包住组件
│       └── Home             # 不规则路由
│           ├── index.js     # 路由定义和代码异步分割
│           ├── assets       # 组件引入的静态资源
│           ├── components   # 直观React组件
│           ├── container    # 连接actions和store
│           ├── modules      # reducers/constants/actions的集合
│           └── routes **    # 不规则子路由(** 可选择的)
routes 作为主入口。
export const createRoutes = (store) => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [
CounterRoute(store),
ZenRoute(store),
ElapseRoute(store),
RouteRoute(store),
PageNotFound(),
Redirect
]
})
一个Counter 模块包含了自身的assets，components，containers
Counter/
components/   # 页面的组件
containers/   # view 和 modules 数据对接
modules/      # 包含对应的 reducer, action
index.js      # 页面入口，定义path
index.js 自动的注入reducer 到store，这样在顶层的store就无需要手动去整合每个模块自身的reducer。代码如下：
// 导入对应的redicer
const reducer = require('./modules/counter').default
/*  Add the reducer to the store on key 'counter'  */
injectReducer(store, { key: 'counter', reducer })