window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__这个变量是浏览器里面的Redux的开发者工具，开发React-redux应用时建议安装，否则会有报错提示。这里面大部分都是redux-thunk的示例代码，关于这部分如果看不懂建议看一下redux-thunk的官方文档，这里要注意的是configureStore这个方法要传入的initialState参数，这个渲染的具体思路是：在服务端判断路由的thunk方法，如果存在则需要执行这个获取数据逻辑，这是个阻塞过程，可以当作同步，获取后放到全局State中，在前端输出的HTML中注入window.__INITIAL_STATE__这个全局变量，当html载入完毕后，这个变量赋值已有数据的全局State作为initState提供给react应用，然后浏览器端的js加载完毕后会通过复用页面上已有的dom和初始的initState作为开始，合并到render后的生命周期中，从而在componentDidMount中已经可以从this.props中获取渲染所需数据。
但还要考虑到页面切换也有可能在前端执行跳转，此时作为React的应用不会触发对后端的请求，因此在componentDidMount这个生命周期里并没有获取数据，为了解决这个问题，我建议在这个生命周期中都调用props中传来的action触发函数，但在action内部进行一层逻辑判断，避免重复的请求，实际项目中请求数据往往会有个标识性ID，就可以将这个ID存入store中，然后就可以进行一次对比校验来提前返回，避免重复发送ajax请求，具体可看store/actions/home.js`中的逻辑处理。
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}}) }) }
注意这里的async/await写法，这里涉及到服务端koa2使用这个来做数据请求，因此需要统一返回async函数，这块不熟的同学建议看下ES7的知识，主要是async如何配合Promise实现异步流程改造，并且如果涉及koa2的服务端工作，对async函数用的更多，这也是本项目要求Node版本为8.x以上的原因，从8开始就可以直接用这两个关键字。
不过到具体项目中，往往会涉及到一些服务端参数的注入问题，但这块根据不同项目需求差异很大，并且不属于这个React服务端改造的一部分，没法统一分享，如果真是公司项目要用到对这块有需求咨询可以打赏后加我微信讨论。
以Home页面为例的渲染流程
为了方便大家理解，我以一个页面为例整理了一下数据流的整体过程，看一下思路：
服务端接收到请求，通过/home找到对应的路由配置
判断路由存在thunk方法，此时执行store/actions/thunk.js里面的暴露出的函数
异步获取的数据会注入到全局state中，此时的dispatch分发其实并不生效
要输出的HTML代码中会将获取到数据后的全局state放到window.__INITIAL_STATE__这个全局变量中，作为initState
window.__INITIAL_STATE__将在react生命周期起作用前合并入全局state，此时react发现dom已经生成，不会再次触发render，并且数据状态得到同步
服务端直出HTML
基本的流程已经介绍结束，至于一些Reducer的函数式写法，还有actions的位置都是参考网上的一些分析来组织的，具体见仁见智，这个只要符合自己的理解，并且有助于团队开发就好。如果您符合我在文章一开始设定的读者背景，相信本文的讲述足够您点亮自己的服务端渲染技术点啦。如果对React了解偏少也没关系，可以参考这里来补充一些React的基础知识