初期データロードReactJS

Question

は

私はレンダリングNews.jsと呼ばれるコンポーネントを作った（例えば、私は、ニュース記事のリストをロードしたいです）記事。私がFLUXモデルで経験している問題は、この初期データをロードする場所です。

私がデータをロードするサービスは、次のとおりです。 'superagent'からのインポート要求。

class NewsService { 

    fetchArticles(callback) { 
    request 
     .get('http://localhost/articles') 
     .accept('json') 
     .end(function(err, res){ 
     console.log(err); 
     var result = JSON.parse(res.text); 
     callback(result); 
     }) 
    } 

} 

export default new NewsService(); 

このサービスはどこかで呼び出す必要があります。 ReactJSのドキュメントによると、私はこのようなこの操作を実行します：

export default class News extends React.Component { 

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

    componentDidMount() { 
    NewsService.fetchProjects(function(articles){ 
     // load articles in the state 
     this.setState({_articles: _articles}) 
    }); 
    } 

    render() { 

     return (
      <section> 
       <h1>Articles</h1> 
       <ul> 
       {this.state.articles.map((article) => { 
        <li>{article.title}</li> 
       })} 
       </ul> 
      </section> 
    ) 
    } 
} 

今、私の質問があり、これはフラックス原則に反しありませんか？データをアクションとして呼び出して、そのデータをNewsStoreなどの店舗に保存するべきではありませんか？

アクションは、次のようにする必要があります：

彼らはAPI呼び出しの例を提供reactjsの Chat-app exampleで

var NewsActions = { 

    load: function() { 
    NewsService.fetchProjects(function(articles){ 
     // store the articles in the NewsStore and dispatch afterwards   
    }); 
    }, 

    create: function(project) { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_CREATE, 
     project: project 
    }); 
    }, 

    update: function(id, project) { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_UPDATE, 
     id: id, 
     project: project 
    }) 
    }, 

    destroy: function() { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_DESTROY, 
     id: id 
    }) 
    } 
}; 

export default NewsActions; 

。しかし、このAPIコールはアプリケーションの起動時に（app.js内で）呼び出されます。これは私のシナリオには適用されません。私はルーティングを使いたいのです。ルータにデータをロードしますか？ （私は反応ルータを使用しています）

このコードの改善や改善については、歓迎します。

Answer 1

EDIT

は、フラックス原則に反するこれではないでしょうか？

おそらく、多分そうではありません。 Fluxはかなり柔軟性があるようです。私が理解していることから、厳密な "プロトコル"ではなく、原則の枠組みのほうが多い。それは言うのは難しいですが、あなたが与えた両方の例がうまくいくように見えます。あなたが言ったように、the docsによると、彼らはcomponentDidMountでデータをフェッチをお勧めします：

componentDidMount: function() { 
    $.get(this.props.source, function(result) { 
    // ... 

しかし、あなたの例では、あなたは、単にその後、店舗/ディスパッチャと対話できるサービスにそのAPI呼び出しを移動していますアプリケーション全体でを利用するためには、があります。

これまで行ってきたことは、アプリケーションロジックの素晴らしい部分を、本質的に独自のモジュール（ディスパッチャの一部であるモジュール）に移動させることでした。それはあなたのニーズを満たしているようです：それはあなたのアプリを越えて使用することができます、そしてそれはあなたが合っているように引っ張ったり、差し込むことができます。私はそれが間違っているとは思わない。 Fluxの何らかの原則に反することはありますか？多分そうでないかもしれません。しかし、私はそれが重要であるとは思わない。

ORIGINAL

私はフラックスアーキテクチャに精通していないんだけど、自分のGitHubのレポ（具体的には、Line 24 of TodoMVC）におけるFacebookの例の一つを見て：

function getTodoState() { 
    return { 
    allTodos: TodoStore.getAll(), 
    areAllComplete: TodoStore.areAllComplete() 
    }; 
} 

彼らの例は表示されません。 TodoStoreはサーバとやりとりするが、初期状態のように見えるだけで、店内のtodosを照会しているだけでなく、変更やリスニングやイベントの発信を行っている。

最初の状態になるまでは、例では直接店に問い合わせるように見えます。明らかにその例を作って以来、変更されている可能性がありますが、それがどのように設計されたかを知るには、Flux repoのいくつかの例を調べる価値があります。