javascript - 初始数据加载 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 等商店中吗？

如果一个 Action 像下面这样:

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;

在Chat-app example在 reactjs 中，他们提供了一个 API 调用示例。但是，此 API 调用是在应用程序启动时调用的(在 app.js 中)，这不适用于我的场景，因为我想使用路由。那我会在路由器中加载数据吗？ (我正在使用 react 路由器)

我们非常欢迎任何有关此事的反馈或对此代码的改进。

Answer 1

编辑

isn't this against the flux principle?

也许，也许不是。看起来 Flux 非常灵活。据我了解，它更像是一个原则框架，而不是严格的“协议(protocol)”。很难说，但看起来你给出的两个例子都会起作用。就像你说的，根据the docs ，他们建议在 componentDidMount 中获取数据:

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

但是，在您的示例中，您只是将该 API 调用移动到一个服务中，然后该服务可以与商店/调度程序等进行交互，以便在整个应用程序中 .

因此，您所做的是将应用程序逻辑的很大一部分移动到它自己的模块(本质上是一个属于您的调度程序的模块)。看起来它会满足您的需求:它可以在您的应用程序中使用，并且可以根据需要拔出或插回。我看不出有什么问题。会不会违背 Flux 的某些原则？也许，也许不是。不过，我怀疑这是否重要。

原创

我不精通 Flux 架构，但在他们的 GitHub 存储库中查看 Facebook 的示例之一(具体来说，Line 24 of TodoMVC):

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

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

就获取初始状态而言，他们的示例显示直接查询商店。显然，从他们制作该示例到现在，可能已经发生了变化，但可能值得研究 Flux repo 中的一些示例。了解它是如何设计的。