初始数据加载 ReactJS

Question

我想在我的第一条路线被渲染时执行一些初始数据加载（例如，我想加载新闻文章列表）

我制作了一个名为 News.js 的组件来呈现文章。我在使用 FLUX 模型时遇到的问题是在哪里加载这些初始数据。

我为加载数据所做的服务如下： 来自“超级代理”的导入请求；

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 中），这在我的场景中不适用，因为我想使用路由。我会在路由器中加载数据吗？ （我正在使用 react-router）

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

Answer 1

编辑

这不违反通量原理吗？

也许，也许不是。似乎 Flux 非常灵活。据我了解，它更像是一个原则框架，而不是一个严格的“协议”。很难说，但看起来你给出的两个例子都行得通。就像你说的，根据the docs，他们建议取componentDidMount中的数据：

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

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

因此，您所做的就是将应用程序逻辑的一大块移动到它自己的模块（嗯，一个模块，它是您的调度程序的一部分）。它似乎可以满足您的需求：它可以在您的应用程序中使用，并且可以在您认为合适的时候拔出或重新插入。我看不出有什么问题。会不会违反 Flux 的某些原则？也许，也许不是。不过，我怀疑这很重要。

原创

我并不精通 Flux 架构，但在 Facebook 的 GitHub 存储库中查看了其中一个示例（具体来说，Line 24 of TodoMVC）：

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

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

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