如何合理布置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，containersCounter/components/   # 页面的组件containers/   # view 和 modules 数据对接modules/      # 包含对应的 reducer, actionindex.js      # 页面入口，定义pathindex.js 自动的注入reducer 到store，这样在顶层的store就无需要手动去整合每个模块自身的reducer。代码如下：// 导入对应的redicerconst reducer = require('./modules/counter').default/*  Add the reducer to the store on key 'counter'  */injectReducer(store, { key: 'counter', reducer })