0

「react-router」、「redux」、およびサーバー側レンダリングを使用する React アプリ/サイトを構築しようとしていますが、ブラウザーでの初期レンダリングの処理方法がよくわかりません。

サーバー側では、JSON オブジェクトを取得し、それを状態に渡し、状態を 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 に答える