私のアプリは多くのアイテムのリストだとしましょう。多くのアイテムがあるので、すべてのアイテムをレフィックス状態に含める必要はありません。特定の選択のためのサーバーサイドレンダリング
ユーザーがmyapp.com/item/：アイテムIDで私を訪問すると、選択したアイテムを表示したいとします。現在、コンポーネントを取得してmyReduxState.selectedItemにレスポンスを保存するには、componentDidMountでapi呼び出しを行います。ただし、これはapi呼び出しが終了するまでユーザーと未完了ページを示します。
これを回避する方法はありますか？
サーバー側で状態を作成することでこの問題を解決しました。私は私のエクスプレスルートのURLからitemIdを取得し、特定のアイテムの詳細を取得します。私はこれを使って状態を作成し、それをフロントエンドに渡します。
私が従う傾向があるパターンは、還元状態でfetchingの状態を追跡することです。 apiが解決すると、状態が正しく設定されていることを確認してからレンダリングメソッドでレンダリングメソッドを使用して、レンダリングしているものを判断します。
render() {
if (this.state.fetching) {
return <div> // put whatever you want here, maybe a loading component?</div>
}
return (
// put the regular content you would put for when the api call finishes and have the data you need
)
}
reduxでサーバーレンダリングについて読んだことはありますか？ http://redux.js.org/docs/recipes/ServerRendering.html –
HTMLをコンパイルする前に、そのデータを取得する必要があります。また、データをフェッチする必要があるかどうかを示す何かをredux状態に含める必要があります。そうすれば、クライアント側はcomponentDidMountでajax呼び出しを行う前にそれを確認できます。 – idbehold
真にサーバー側でレンダリングされるようにするには、フェッチをcomponentWillMountに移動する必要があります。これは、サーバーとクライアントの両方で呼び出されます（componentDidMountはクライアント上でのみ呼び出されます）。 isomorphic-fetchやaxios、superagentのような同形/汎用フェッチライブラリを使う必要もあります。 –