這種結(jié)構(gòu)諧在讓程序更容易擴展
├── src                      # 程序源文件
│   ├── main.js              # 程序啟動和渲染
│   ├── components           # 全局可復(fù)用的表現(xiàn)組件(Presentational Components)
│   ├── containers           # 全局可復(fù)用的容器組件
│   ├── layouts              # 主頁結(jié)構(gòu)
│   ├── store                # Redux指定塊
│   │   ├── createStore.js   # 創(chuàng)建和使用redux store
│   │   └── reducers.js      # Reducer注冊和注入
│   └── routes               # 主路由和異步分割點
│       ├── index.js         # 用store啟動主程序路由
│       ├── Root.js          # 為上下文providers包住組件
│       └── Home             # 不規(guī)則路由
│           ├── index.js     # 路由定義和代碼異步分割
│           ├── assets       # 組件引入的靜態(tài)資源
│           ├── components   # 直觀React組件
│           ├── container    # 連接actions和store
│           ├── modules      # reducers/constants/actions的集合
│           └── routes **    # 不規(guī)則子路由(** 可選擇的)
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 數(shù)據(jù)對接
modules/      # 包含對應(yīng)的 reducer, action
index.js      # 頁面入口，定義path
index.js 自動的注入reducer 到store，這樣在頂層的store就無需要手動去整合每個模塊自身的reducer。代碼如下：
// 導(dǎo)入對應(yīng)的redicer
const reducer = require('./modules/counter').default
/*  Add the reducer to the store on key 'counter'  */
injectReducer(store, { key: 'counter', reducer })