反応フラックスAPI呼び出しによる初期データの読み込み

Question

私はこの問題を何時間も悩まされています。私はFluxアーキテクチャを実装したいと思います。 ToDoリストを作成しようとしています。しかし、手元にある初期データをロードしたい。私todoStore.js例えば：

import toDoStore from './stores/todoStore' 

class BucketApp extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      bucket_list: toDoStore.getAll() 
     }; 
    } 

そして、これが結構な作品：

import { EventEmitter } from "events"; 

class ToDoStore extends EventEmitter { 
    constructor(){ 
     super(); 
     this.bucket_list = [{ 
      id: 123, 
      name: "Hi", 
      isCompleted: false 
     }] 

    } 

    getAll(){ 
     return this.bucket_list; 
    } 
} 

私は私のtodo.jsで使用され、ここでいくつかの初期データを持っています。私はcomponentからデータを受け取る基本的にcollectionの店を持っています。しかし、今私はデータベースからデータを初期化したい。だから、私はtodoStore.jsを更新しました：

class BucketlistStore extends EventEmitter { 
    constructor(){ 
     super(); 
     fetch(url) 
      .then(d => d.json()) 
      .then(d => { 
       this.bucket_list = d; 
      }); 
    } 

    getAll(){ 
     return this.bucket_list; 
    } 
} 

をしかし、のgetAll（）はundefinedを返します。これはなぜですか？私は間違って何をしていますか？

Answer 1

データをフェッチすることは非同期であり、初期化時this.bucket_listが定義されていないので、それはundefinedを返します。これを試してみてください：

class BucketlistStore extends EventEmitter { 
    constructor(){ 
     super(); 
     this.bucket_list_promise = fetch(url) 
      .then(d => d.json()); 
    } 

    getAll(){ 
     return this.bucket_list_promise; 
    } 
} 

その後、

import toDoStore from './stores/todoStore' 

class BucketApp extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      loadingData: true, 
      bucket_list: null 
     }; 
    } 

    componentWillMount(){ 
     toDoStore.getAll().then(result => { 
      this.setState({ bucket_list: result, loadingData: false }) 
     }) 
    } 

Answer 2

fetchは非同期操作なので、getAll()をあまりに早く呼び出すことがありますか？それは解決策ではないのですが、あなたは仮定を確認することがあります。

class BucketlistStore extends EventEmitter { 
    constructor(){ 
     super(); 
     this.loading = true; 
     fetch(url) 
      .then(d => d.json()) 
      .then(d => { 
       this.loading = false; 
       this.bucket_list = d; 
      }); 
    } 

    getAll(){ 
     console.log(this.loading); 
     return this.bucket_list; 
    } 
} 

それが本当なら、私はloadingがtrueている間BucketAppをレンダリングするだけではないことをお勧め。フラグを格納してレンダリングを防止するためにBucketAppに使用してください（代わりにローダを表示）。

Answer 3

私はあなたのコンポーネントが非同期フェッチを終了する前に自分自身をレンダリングするので、それが起こると仮定します。言い換えれば、あなたは未定義取得し、あなたが（あなたの店が更新されたとき）fetchを終えた後の結果を取得するときにコンポーネントが更新されません。上記の手法を適用するか、Reduxを使用することができます。 Reduxでは、ストアが更新されると、何らかの形でReduxストアに接続されているすべてのコンポーネントが更新されます。