8

私は現在、以下のサーバー側レンダリング ロジック (reactjs + nodejs +redux を使用) を使用して、最初にデータを同期的に取得し、ストアの初期状態として設定しています。

fetchInitialData.js

  export function fetchInitialData(q,callback){
      const url='http://....'
      axios.get(url)
          .then((response)=>{
              callback((response.data));
          }).catch((error)=> {
            console.log(error)
      })
  }

データを非同期にフェッチし、出力をロードして、コールバックを使用してページが最初にロードされたときに保存します。

handleRender(req, res){
 fetchInitialData(q,apiResult => {
    const data=apiResult;
    const results ={data,fetched:true,fetching:false,queryValue:q}
    const store = configureStore(results, reduxRouterMiddleware);
     ....
    const html = renderToString(component);
    res.status(200);
    res.send(html);
    })
}

最初のページの読み込み時に 4 ～ 5 回の API 呼び出しを行う必要があるため、ページの読み込み時に複数の呼び出しを行う簡単な方法があるかどうかを確認することを考えました。

初期状態をロードするために、API 呼び出しを連鎖させ、異なる API 呼び出しからの応答を手動でマージして送り返す必要がありますか?

更新 1: axios.all アプローチの使用を考えています。それが理想的なアプローチかどうか教えてもらえますか?

4

3 に答える 3

7

リクエストが順番にではなく、並行して行われるようにする必要があります。

API呼び出しごとにPromiseを作成することでこれを以前に解決し、axios.all(). 以下のコードは基本的に疑似コードです。後でより良い実装を掘り下げることができます。

handleRender(req, res){
  fetchInitialData()
    .then(initialResponse => {
      return axios.all(
        buildFirstCallResponse(),
        buildSecondCallResponse(),
        buildThirdCallResponse()
      )
    })
    .then(allResponses => res.send(renderToString(component)))
}

buildFirstCallResponse() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .catch(err => console.error('Something went wrong in the first call', err))
    .then(response => response.json())
}

すべての応答が配列にまとめられていることに注意してください。

Redux のドキュメントでは、サーバー側のレンダリングについて少し触れていますが、既にご覧になっているかもしれません。redux.js.org/docs/recipes/ServerRendering

また、Promise のドキュメントを参照して、正確に何.all()が行われているかを確認してください。developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

不明な点があればお知らせください。

于 2016-10-25T18:04:00.867 に答える
0

Express- Batch を試すか、GraphQLを使用することも別のオプションです。

于 2016-10-30T21:30:37.337 に答える
0

また、Redux-Sagas を使用して、純粋な Redux アクションを使用して複数の API 呼び出しをトリガーし、純粋なアクションを使用してそれらすべての呼び出しを処理することもできます。英雄譚の紹介

于 2016-11-01T02:31:05.837 に答える