React/Reduxページのレンダリング前にAPIレスポンスからコンテンツをプリロードする

Question

現在、メニューを含むWebアプリケーションを構築中です。メニューはいくつかの変数に応じて変わる可能性があるので、私はapiを呼び出して、表示されるべき正しいメニュー項目を要求します。

server.get('/api/getMenu', (req, res) => { 
    getMenu((err, content) => { 
     if(!err) { 
      res.send(content); 
     } else { 
      res.status(500).send(); 
     } 
    }) 
}); 

この要求は完全に正常に動作している、と私は、これが再び正常に動作し、メニュー項目をロードしている、しかし、それは奇妙に見えるcomponentWillMount

に

export function fetchMenuItems() { 
    return (dispatch) => { 
     fetch('/api/getMenu') 
      .then((response) => { 
       if (!response.ok) { 
        throw Error(response.statusText); 
       } 

       return response; 
      }) 
      .then((response) => response.json()) 
      .then((results) => dispatch(fetchSuccess(results))) 
    } 
} 

export function fetchSuccess(results) { 
    return { 
     type: 'FETCH_SUCCESS', 
     menuItems: results 
    }; 
} 

を、このAPIを呼び出すアクションを派遣していますページの残りの部分が既に読み込まれた後にメニューアイテムがページ上にレンダリングされているように見えます（リクエストの所要時間が原因であると想定しています）。

ページ全体が実際にレンダリングされる前にメニューアイテムをプリロードする方法はありますか？私は約束を聞いたことがありますが、それはほとんど分かりませんが、これは潜在的に解決策ですか？

Answer 1

私はあなたがcomponentWillMount反応ライフサイクルメソッドを探していると仮定しています。

componentWillMountは、コンポーネントが初めてレンダリングされる直前に1回だけ呼び出されます。これは、プリロードデータロジックを配置するのに最適な場所です。

これが役に立ちます。