状態を一度だけDBとストアからデータを読み込む

Question

これは私の状況です。私はそうのように、データベースからいくつかのデータをロードするコンポーネントを持っている：私はcomponentWillMountメソッドにこのコードを追加した場合

const task= fetch(`http://example.com`) 
     .then(result => result.json()) 
     .then(result => { 
      this.setState({ 
       items: result 
      }) 
     }); 

     addTask(task); 

は今、それは、しかし、私はコンポーネントをロードするたびに作業を行い、この方法では起動します毎回データベースを呼び出す必要はありません。最初のロード時に一度呼び出され、状態に保存され、再度呼び出されることはありません。私はアイテムのリストをレンダリングしていますので、

そして、私は手動でnullエラーを回避するために、コンストラクタでこのitems変数を設定する必要があります。私は一度だけこのデータをロードすることができますどのように、

constructor() { 
    super(); 
    this.state = { 
     items: [], 
    } 
} 

私の質問があるのと、それをitems状態変数に設定します。私はコンポーネントの減速機（私はreduxを使用しています）にこのすべてのコードを追加しようとしましたが、動作しません。

Answer 1

あなたの再来の状態のデータを確認することができ、データがそれを呼び出すいけない存在する場合、このような何か：

componentWillMount() { 
    if (!this.props.data) { 
    const task= fetch(`http://example.com`) 
    .then(result => result.json()) 
    .then(result => { 
     this.setState({ 
      items: result 
     }) 
    }); 

    addTask(task); 
    } 
} 

Answer 2

あり、あなたがやろうとしているものを達成するためのいくつかの方法がありますが、それらのすべてのそれぞれがもたらします私は思っているより多くの質問を答えてください。

最初の質問は、最初のフェッチ後にローカルにデータを保存したとします。サーバー上のデータが変更されるとどうなりますか？データが変更されていることをクライアント側に何らかの形で通知してから、データを再度フェッチしてローカルデータを同期させることができます。あるいは、定期的に新しいデータをチェックすることもできます。行く方法はたくさんあります。

この状況は、親コンポーネントにデータをロードし、それを使用するコンポーネントにデータを渡すか、永続的なreduxまたは同様のソリューションを使用する場合に発生します。

Realm、Firebaseなどの3つのライブラリソリューションを利用できます。これらのシステムには、データの呼び出し時にダウンロードを減らす永続的またはローカルの記憶域オプションがあります。しかし、これらのソリューションは、バックエンドのロジックを変更する必要があります。

私が前に言ったように、これらの状況を処理する単一の方法はなく、本当にあなたのプロジェクトと好みによって異なります。