這種結構諧在讓程序更容易擴展
├── 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 })