React-Redux-Start-Kit结构分析

文件结构

├── 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'

1. 加载程序顶层组件，使用ReatDOM.render渲染显示在页面。
2. 获取store&history&router，并传递给顶层组件。

AppContainer

定义组件，用于构建redux与router。

PATH: '/src/containers/AppContainer'

    
  

router使用PlainRoute对象构建路由树。

PATH: /src/routes/index.js
export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [
    CounterRoute(store)
  ]
})

添加新页面

1. /src/componets/example中添加视图jsx文件。
2. /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)与中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

依赖

• react
• redux
• react-router
• react-router-redux
• webpack
• babel
• koa
• karma
• eslint