Question

我正在尝试构建一个使用＆＃34; react-router＆＃34;，＆＃34; redux＆＃34;的React app / site。和服务器端渲染，我不太了解如何在浏览器中处理初始渲染。

在服务器端，我可以获取一个JSON对象，将其传递给状态，然后将状态映射到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')
);}

因此，渲染因未定义的道具而失败。有没有办法解决这个问题 - 可能会推迟浏览器渲染，直到获取数据？

Answer 1

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

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

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

createStore(reducer, window.initialState);

异步获取数据时的初始浏览器重新呈现

1 个答案: