初始數據加載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> 
    ) 
    } 
} 

現在我的問題是，這不是針對磁通原理？不應該將數據調用爲Action，然後將其數據存儲在NewsStore等商店中？

如果一個動作是這樣的：

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; 

在reactjs的Chat-app example他們提供了一個API調用的例子。然而，這個API調用是在應用程序啓動時調用的（在app.js中），這在我的場景中不適用，因爲我想使用路由。我會在路由器中加載數據嗎？ （我正在使用反應路由器）

任何關於此問題的反饋或對此代碼的改進都非常值得歡迎。

Answer 1

編輯

這不就是對流量的原則？

也許，也許不是。似乎Flux非常靈活。根據我的理解，它更多的是一個原則框架，而不是一個嚴格的「協議」。很難說，但看起來你所提供的兩個例子都可以工作。就像你說的，根據the docs，他們建議在componentDidMount獲取數據：但是

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

，在你的榜樣，你只需移動該API調用到服務，然後可以與商店/調度交互等等，以便在整個應用程序中使用。

所以你所做的是將你的應用程序邏輯的一大塊本質上移動到它自己的模塊（以及作爲調度程序一部分的模塊）。看起來它會滿足您的需求：它可以在您的應用程序中使用，並且可以在您認爲合適的情況下將其拉出或重新插入。我沒有看到任何問題。難道它違背了Flux的一些原則嗎？也許，也許不是。不過，我懷疑它很重要。

ORIGINAL

我不是很精通助焊劑架構，但看的Facebook在他們的GitHub庫的例子之一（具體Line 24 of TodoMVC）：

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

他們的榜樣不顯示TodoStore如何與服務器交互，但它看起來像是初始狀態，他們只是查詢商店中的待辦事項，然後進行更改，監聽和發送事件。

因此，就獲得初始狀態而言，它看起來像他們的示例直接顯示查詢商店。顯然自從他們做出這個例子的時候開始，現在可能會發生變化，但可能需要調查一下Flux repo中的一些例子，以瞭解它是如何設計的。