REST APIに対応 - マウント時に状態またはGET？

Question

現在、Nodeによって提供されるREST APIバックエンドを使用してReact-Reduxフロントエンドを構築しています。 Reduxを使用するか、APIの単純な呼び出しを使用してコンポーネントをマウントするかはわかりません。

コンポーネントは、サイト全体（ただし常にではありません）に表示されるプロファイルの単純なリストです。

申し訳ありません。おそらく利用可能なものを読むための何かがありますか？

Answer 1

私は二つのことを見てみることをおアドバイスします：Facebook上で最初のリアクトチュートリアルは非常に過小評価され

1）： https://facebook.github.io/react/docs/thinking-in-react.html

それは考える方法を考えるために非常に明確な方法を公開しますあなたの意見の木構造について

2）そこからは、コンテナとコンポーネントについて読むに移動：レンダラーとしておよびコントローラ（VとCの両方に取って行為： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

をこのポストが反応要素があまりにも頻繁に2つのことを行うことを説明しMVCで）。

あなたのリアクションビューにはコントローラが必要です。コンポーネントをマウントするたびにフェッチすると、情報の表示方法とフェッチ方法の2つの異なる問題が重複します。

class MyApp extends React.Component { 
    componentDidMount() { 
    fetch('/profiles').then(res => res.json().then(::this.setState)) 
    } 
    render() { 
    if (this.state) { 
     return <ProfileList profiles={this.state} /> 
    } else { 
     return <span>Loading...</span> 
    } 
    } 
} 

あなたの「コンテナ」のようになります。

あなたが単一でそれを行うことができますが、大きなアプリケーションの完全な状態を管理するコンポーネントを反応します。あなたの「コンポーネント」は、その情報が取得されたかを気にしない必要のある、プロファイルのリストの純粋な表現です：

class ProfileList extends React.Component { 
    render() { 
    return <ul> 
     { 
     this.props.profiles.map(
      profile => <li key={profile.id}>{profile.name}</li> 
     ) 
     } 
    </ul> 
    } 
} 

Reduxのは、情報のより良い再利用を可能にこれを行うだけで、別の方法である、とすることを可能異なるコンポーネントに利用可能な同じ情報（ミックスインとして「ストア」のインスタンスを隠す）。そのMyApp構造体の上のクラスは、reduxのProviderクラスと同様の機能を果たします。子コンポーネントは、自分自身を表示するために必要な情報にアクセスできます。