初始数据加载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示例中,它们提供了一个API调用示例.但是,这个API调用是在应用程序启动时调用的(在app.js中),这在我的场景中不适用,因为我想使用路由.我会在路由器中加载数据吗？(我正在使用react-router)

有关此问题的任何反馈或此代码的改进都非常受欢迎.

Answer 1

编辑

这不是违反通量原理吗？

也许，也许不是。看起来 Flux 相当灵活。据我了解，它更多的是一个原则框架，而不是一个严格的“协议”。很难说，但看来你给出的两个例子都有效。正如您所说，根据文档，他们建议在以下位置获取数据componentDidMount：

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

但是，在您的示例中，您只需将该 API 调用移至服务中，然后该服务可以与存储/调度程序等进行交互，以便在整个应用程序中使用。

因此，您所做的就是将应用程序逻辑的很大一部分移动到其自己的模块（嗯，是调度程序一部分的模块）。看起来它会满足您的需求：它可以在您的应用程序中使用，并且可以根据您的需要拔出或重新插入。我不认为这有什么问题。难道这违背了 Flux 的某些原则吗？也许，也许不是。但我怀疑这是否重要。

原来的

我不太熟悉 Flux 架构，但查看了 Facebook 在 GitHub 存储库中的示例之一（特别是TodoMVC 的第 24 行）：

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

他们的示例没有显示如何TodoStore与服务器交互，但看起来确实像他们的初始状态，他们只是查询商店中的待办事项，然后对于更改，他们侦听和发出事件。

因此，就获取初始状态而言，他们的示例似乎显示直接查询商店。显然，从他们制作该示例到现在，可能已经发生了变化，但可能值得研究Flux 存储库中的一些示例，以了解它的设计方式。