文件结构
├── 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 # 描述页面整体布局结构
│ ├── 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>组件，用于构建redux与router。
PATH: '/src/containers/AppContainer'
<Provider store={store}>
<Router history={history} children={routes} />
</Provider>
router使用PlainRoute对象构建路由树。
PATH: /src/routes/index.js
export const createRoutes = (store) => ({
path: '/',
component: CoreLayout,
indexRoute: Home,
childRoutes: [
CounterRoute(store)
]
})
添加新页面
-
/src/componets/example中添加视图jsx文件。 -
/src/routes/example中定义不规则路由。
2.1 在./modules/中定义reducers/constants/actions的集合。
2.2 在./containers/中使用connet函数连接Redux和React，返回一个绑定好的新组件。通过mapStateToProps与mapDispatchToProps过滤传入组件的props与actions。
2.3 在./index.js中导出子路由{path,component}。使用Webpack的require.ensure创建分割点嵌入异步模块。
Tip:
getComponent(nextState, callback)与<Route path="inbox" component={Inbox} />中component作用相同，但是有利于代码分解，异步获取。
使用callback回调函数返回组件到Router。
Component与Container
component：可复用的直观组件(Presentational Components),
containers：可复用的容器组件
绝大多数组件写在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 |
