React项目的服务端渲染改造(koa2+webpack3.11)

├── 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}})
  })
}