前言
上一篇文章中，我们介绍了 React 同构的基本原理，但没有涉及数据获取方面。本章我们将结合 Redux 来讲解同构应用中服务端如何异步获取数据。
如果你对 Redux 还不够熟悉，请先移步 http://cn.redux.js.org/
数据预取
客户端渲染中，异步数据结合 Redux 的使用方式遵循下面的流程：
- 创建 Store
- 根据路由显示组件
- 派发 Action 获取数据
- 更新 Store 中的数据
- 组件 Rerender
而在服务器端，页面一旦确定内容，就没有办法 Rerender 了，这就要求组件显示的时候，就要把 Store 的数据都准备好，所以服务器端异步数据结合 Redux 的使用方式，流程是下面的样子：
- 创建 Store
- 匹配请求路由
- 获取数据
- 结合数据和组件生成 HTML
下面我们分析下服务器端渲染这部分的流程。
创建 Store
export default (initialState) => {
return createStore(
reducer,
initialState,
compose(
applyMiddleware(thunkMiddleware),
(process.env.NODE_ENV !== 'server' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) || compose
)
);
};
const store = createStore({});
这里需要注意的是服务端每次 renderToString 都需要创建一个全新的空 Store。
匹配请求路由
服务端在正式渲染前，如果某些内容是通过异步接口请求获取的，那么就需要在 renderToString 前加载数据，但一般不同的路由都会对应不同的异步请求，所以这里我们需要添加路由匹配的逻辑。
const { matchRoutes } = require('react-router-config');
// 匹配路由
let matchs = matchRoutes(router, request.path);
promises = matchs.map(({ route, match }) => {
const loadData = route.loadData;
// match.params获取匹配的路由参数
return loadData ? loadData(store, Object.assign(match.params, request.query)) : Promise.resolve(null);
});
获取数据
这里请求数据需要使用异步 Action，使用 redux-thunk 中间件就可以dispatch函数了。
而请求数据一般两种做法，第一种直接挂在了路由上，另一种做法是把请求数据的方法放到对应的组件上定义成静态方法。
但这里我用了 loadable 动态加载组件后，定义在组件上的静态方法在服务端就取不到，所以只能采用第一种做法（不知道大家有没有遇到这个问题？）。
{
path: '/top-list',
component: loadable(() => import('../containers/TopList')),
exact: true,
loadData(store) {
return store.dispatch(fatchTopList());
}
}
返回 HTML
获取数据，更新 store 后，可以用 renderToString 生成 html 了。
// resolve所有loadData
Promise.all(promises).then(() => {
// 异步数据请求全部完成后进行render
render()；
})；
这里的 render 方法核心就是 renderToString，因为还有一些其他逻辑，所以封装了一层。
同步数据
客户端渲染出来的 html 内容要和服务端返回的 html 内容一致，这就需要保证客户端的数据和服务端的数据是一致的。也就是说服务端获取数据生成 store 后，需要同步到客户端。
服务端调用 store.getState()，获取到 state 后，通过 window.INITIAL_STATE 保存在客户端。
<script type="text/javascript">
window.__INITIAL_STATE__ = ${JSON.stringify(store.getStat())}
</script>
客户端获取数据
服务端将数据存到 window.INITIAL_STATE 后，客户端需要在 createStore 的时候获取初始化的 state。
// 获取服务端初始化的state，创建store
const initialState = window.__INITIAL_STATE__;
const store = createStore(initialState);
const App = () => {
return (
<Provider store={store}>
<Router>
<Component />
</Router>
</Provider>
);
};
return <App />;
总结
本章主要讲解结合 Redux 情况下的 React 同构应用，所涉及的知识点还是比较多的，单单一篇文章也很难涉及全部的知识点，实际开发过程中更是容易出现千奇八怪的问题。实践出真知，还是要亲自写一下才能深入了解。
