0

我正在尝试构建一个使用“react-router”、“redux”和服务器端渲染的 React 应用程序/站点，但我不太明白如何处理浏览器中的初始渲染。

在服务器端，我可以获取一个 JSON 对象，将其传递给 state，然后将 state 映射到 props - 所有这些都是同步的 - 最后使用已经初始化的 props 渲染组件。

const routes = <Router>
<Route path='/' component={ViewComposite} 
  onEnter={ ({params}) => { store.dispatch(setViewProps(props)); }} />
<Route path='/admin' component={AdminComposite} 
  onEnter={ ({params}) => { store.dispatch(setAdminProps(props)); }} />
</Router>;

但是，当浏览器开始发挥作用时，我需要通过 AJAX 请求获取数据 - 异步：

window.onload = function() {
const store = createStore(viewPropsReducer);

ReactDOM.render(
    <Provider store={store} >
        <Router history={browserHistory} >
            <Route path="/" component={ViewComposite} 
 onEnter={ ({params}) => {store.dispatch(fetchViewData()); }} />
            <Route path='/admin' component={AdminComposite} 
 onEnter={ ({params}) => {store.dispatch(fetchAdminData()); }} />
        </Router>
    </Provider>,
    document.getElementById('viewMount')
);}

结果，由于未定义的道具，渲染失败。有没有办法解决这个问题 - 也许推迟浏览器渲染直到获取数据？

4

1 回答 1

2

您可以将 json 有效负载添加到服务器呈现的 html。

<script> 
    window.payload = <json>
 </script>

如果您的状态是可序列化的，我想您可以将状态放在那里，并在创建商店时将其作为 initialState 传递。

createStore(reducer, window.initialState);
于 2016-03-11T16:27:29.030 回答