文件結(jié)構(gòu)
├── bin # Build/Start scripts
├── blueprints # Blueprint files for redux-cli
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── server # Koa application (uses webpack middleware)
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── components # Reusable Presentational Components
│ ├── containers # Reusable Container Components
│ ├── layouts # 描述頁面整體布局結(jié)構(gòu)
│ ├── redux # "Ducks" location...
│ │ └── modules # reducer, action, creators not part of a route
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ └── Home # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ ├── container # Connect components to actions and store
│ │ ├── modules # Collections of reducers/constants/actions
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── static # Static assets (not imported anywhere in source code)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles (generally settings)
└── tests # Unit tests
main.js
PATH: '/src/main.js'
- 加載程序頂層組件
<AppContainer>湘今，使用ReatDOM.render渲染顯示在頁面。 - 獲取
store&history&router摩瞎，并傳遞給頂層組件拴签。
AppContainer
定義<AppContainer>組件，用于構(gòu)建redux與router岸梨。
PATH: '/src/containers/AppContainer'
<Provider store={store}>
<Router history={history} children={routes} />
</Provider>
router使用PlainRoute對(duì)象構(gòu)建路由樹。
PATH: /src/routes/index.js
export const createRoutes = (store) => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [
CounterRoute(store)
]
})
添加新頁面
-
/src/componets/example中添加視圖jsx文件。 -
/src/routes/example中定義不規(guī)則路由茂装。
2.1 在./modules/中定義reducers/constants/actions的集合豆茫。
2.2 在./containers/中使用connet函數(shù)連接Redux和React倦挂，返回一個(gè)綁定好的新組件。通過mapStateToProps與mapDispatchToProps過濾傳入組件的props與actions骨稿。
2.3 在./index.js中導(dǎo)出子路由{path,component}晤碘。使用Webpack的require.ensure創(chuàng)建分割點(diǎn)嵌入異步模塊端衰。
Tip:
getComponent(nextState, callback)與<Route path="inbox" component={Inbox} />中component作用相同，但是有利于代碼分解，異步獲取荤牍。
使用callback回調(diào)函數(shù)返回組件到Router。
Component與Container
component：可復(fù)用的直觀組件(Presentational Components),
containers：可復(fù)用的容器組件
絕大多數(shù)組件寫在Component中，但是一些需要connect到redux的組件寫在container中旱函。
| Presentational Components | Container Components | |
|---|---|---|
| Purpose | right-aligned | $1600 |
| Aware of Redux | No | Yes |
| To read data | Read data from props | Subscribe to Redux state |
| To change data | Invoke callbacks from props | Dispatch Redux actions |
| Are written | By hand | Usually generated by React Redux |
