├── assets
│ └── index.css //放置一些全局的資源文件 可以是js 圖片等
├── config
│ ├── webpack.config.dev.js 開發環境webpack打包設置
│ └── webpack.config.prod.js 生產環境webpack打包設置
├── package.json
├── README.md
├── server server端渲染文件，如果對不是很了解，建議參考[koa教程](http://wlxadyl.cn/2018/02/11/koa-learn/)
│ ├── app.js
│ ├── clientRouter.js // 在此文件中包含了把服務端路由匹配到react路由的邏輯
│ ├── ignore.js
│ └── index.js
└── src
 ├── app 此文件夾下主要用于放置瀏覽器和服務端通用邏輯
 │ ├── configureStore.js //redux-thunk設置
 │ ├── createApp.js //根據渲染環境不同來設置不同的router模式
 │ ├── index.js
 │ └── router
 │ ├── index.js
 │ └── routes.js //路由配置文件！ 重要
 ├── assets
 │ ├── css 放置一些公共的樣式文件
 │ │ ├── _base.scss //很多項目都會用到的初始化css
 │ │ ├── index.scss
 │ │ └── my.scss
 │ └── img
 ├── components 放置一些公共的組件
 │ ├── FloatDownloadBtn 公共組件樣例寫法
 │ │ ├── FloatDownloadBtn.js
 │ │ ├── FloatDownloadBtn.scss
 │ │ └── index.js
 │ ├── Loading.js
 │ └── Model.js 函數式組件的寫法
 │
 ├── favicon.ico
 ├── index.ejs //渲染的模板 如果項目需要，可以放一些公共文件進去
 ├── index.js //包括熱更新的邏輯
 ├── pages 頁面組件文件夾
 │ ├── home
 │ │ ├── components // 用于放置頁面組件，主要邏輯
 │ │ │ └── homePage.js
 │ │ ├── containers // 使用connect來封裝出高階組件 注入全局state數據
 │ │ │ └── homeContainer.js
 │ │ ├── index.js // 頁面路由配置文件 注意thunk屬性
 │ │ └── reducer
 │ │ └── index.js // 頁面的reducer 這里暴露出來給store統一處理 注意寫法
 │ └── user
 │ ├── components
 │ │ └── userPage.js
 │ ├── containers
 │ │ └── userContainer.js
 │ └── index.js
 └── store
 ├── actions // 各action存放地
 │ ├── home.js
 │ └── thunk.js
 ├── constants.js // 各action名稱匯集處 防止重名
 └── reducers
 └── index.js // 引用各頁面的所有reducer 在此處統一combine處理

const renderApp=()=>{
 let application=createApp({store,history});
 hydrate(application,document.getElementById('root'));
}
window.main = () => {
 Loadable.preloadReady().then(() => {
 renderApp()
 });
};
if(process.env.NODE_ENV==='development'){
 if(module.hot){
 module.hot.accept('./store/reducers/index.js',()=>{
 let newReducer=require('./store/reducers/index.js');
 store.replaceReducer(newReducer)
 })
 module.hot.accept('./app/index.js',()=>{
 let {createApp}=require('./app/index.js');
 let newReducer=require('./store/reducers/index.js');
 store.replaceReducer(newReducer)
 let application=createApp({store,history});
 hydrate(application,document.getElementById('root'));
 })
 }
}

import routesConfig from './routes';
const Routers=({history})=>(
 <ConnectedRouter history={history}>
 <p>
 {
 routesConfig.map(route=>(
 <Route key={route.path} exact={route.exact} path={route.path} component={route.component} thunk={route.thunk} />
 ))
 }
 </p>
 </ConnectedRouter>
)
export default Routers;

import {homeThunk} from '../../store/actions/thunk';
const LoadableHome = Loadable({
 loader: () =>import(/* webpackChunkName: 'Home' */'./containers/homeContainer.js'),
 loading: Loading,
});
const HomeRouter = {
 path: '/',
 exact: true,
 component: LoadableHome,
 thunk: homeThunk // 服務端渲染會開啟并執行這個action，用于獲取頁面渲染所需數據
}
export default HomeRouter

/*configureStore.js*/
import {createStore, applyMiddleware,compose} from "redux";
import thunkMiddleware from "redux-thunk";
import createHistory from 'history/createMemoryHistory';
import { routerReducer, routerMiddleware } from 'react-router-redux'
import rootReducer from '../store/reducers/index.js';
const routerReducers=routerMiddleware(createHistory());//路由
const composeEnhancers = process.env.NODE_ENV=='development'?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
const middleware=[thunkMiddleware,routerReducers]; //把路由注入到reducer，可以從reducer中直接獲取路由信息
let configureStore=(initialState)=>createStore(rootReducer,initialState,composeEnhancers(applyMiddleware(...middleware)));
export default configureStore;

import {ADD,GET_HOME_INFO} from '../constants'
export const add=(count)=>({type: ADD, count,})
export const getHomeInfo=(sendId=1)=>async(dispatch,getState)=>{
 let {name,age,id}=getState().HomeReducer.homeInfo;
 if (id === sendId) {
 return //是通過對請求id和已有數據的標識性id進行對比校驗，避免重復獲取數據。
 }
 console.log('footer'.includes('foo'))
 await new Promise(resolve=>{
 let homeInfo={name:'wd2010',age:'25',id:sendId}
 console.log('-----------請求getHomeInfo')
 setTimeout(()=>resolve(homeInfo),1000)
 }).then(homeInfo=>{
 dispatch({type:GET_HOME_INFO,data:{homeInfo}})
 })
}