React Reduxアプリケーションでサーバーから初期データを取得する場所はどこですか？

Question

私はReact/Reduxを学び始め、おそらく非常に基本的な質問である何かを見つけました。以下は、簡単にするためにいくつかのコードを削除して私のアプリから抜粋です。

私の状態は、デフォルトで空のサイトの配列によって記述されます。後で減速する人は、ユーザーが別のページにページを変更したときに別のサイトのセットを読み込むように、今のところは何もしていませんが、LOAD_SITESアクションを実行します。反応はPublishedSitesPageのレンダリングから始まり、PublishedSitesBoxをレンダリングし、データをループして個々のサイトをレンダリングします。

デフォルトの空の配列ですべてをレンダリングし、「サーバーからサイトをロードする」約束を開始し、一度解決したらLOAD_SITESアクションを送出します。この電話をかける最善の方法は何ですか？私はPublishedSitesBoxまたはおそらくcomponentDidMountのいずれかのコンストラクタを考えていました。しかし、これがうまくいくかどうかは確信していません。私の心配は、私がこのように無限ループを作り、再レンダリングを続けるということです。私は "haveRequestedInitialData"の行に沿っていくつかの他の状態パラメタを持つことによって何らかの形でこの無限ループを防ぐことができたと思います。私が持っていたもう一つのアイデアは、ReactDOM.render()の直後にこの約束をすることです。これを行うには最高のクリーンな方法は何ですか？

export default function sites(state = [], action) { 
    switch (action.type) { 
    default: 
     return state; 
    } 
} 
... 

const publishedSitesPageReducer = combineReducers({ 
    sites 
}); 

ReactDOM.render(
    <Provider store={createStore(publishedSitesPageReducer)}> 
    <PublishedSitesPage /> 
    </Provider>, 
    this.$view.find('.js-published-sites-result-target')[0] 
); 

... 

export default function PublishedSitesPage() { 
    return (
    <PublishedSitesBox/> 
); 
} 

... 

function mapStateToProps(state) { 
    return { sites: state.sites }; 
} 

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => { 
    // render sites 
}); 

Answer 1

このデータロードロジックがReactコンポーネントに全く触れる理由はありません。ここであなたが望むのは、あなたのレデューサーにアクションをディスパッチするという約束を返すことです。レデューサーはストアに適切な変更を加え、Reactコンポーネントが適切に再描画されるようにします。

（あなたがReactDOM.renderを呼び出す前または後にあなたが非同期呼び出しをキックオフするかどうかは問題ではありません。約束は、いずれかのように動作します）このような

何か：

var store = createStore(publishedSitesPageReducer); 

someAsyncCall().then(function(response) { 
    store.dispatch(someActionCreator(response)); 
}); 

ReactDOM.render(
    <Provider store={store}> 
    <PublishedSitesPage /> 
    </Provider>, 
    this.$view.find('.js-published-sites-result-target')[0] 
); 

あなたが反応コンポーネントは店舗の消費者ですが、店舗の唯一の消費者である必要があるというルールはありません。

Answer 2

それを行う方法については、ここで明確な例があります：無限ループ、あなたの配列はもはや空になると、クリア間隔についてはFacebook Tutorial

が。 これにより、ループが防止されます。