├── 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}>
 <div>
  {
  routesConfig.map(route=>(
   <Route key={route.path} exact={route.exact} path={route.path} component={route.component} thunk={route.thunk} />
  ))
  }
 </div>
 </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}})
 })
}