修改

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;

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

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

Answer 1

修改

这不符合通量原则吗？

也许，也许不是。看起来像Flux非常灵活。据我所知，它更像是一个原则框架，而不是一个严格的协议＆＃34;。这很难说，但似乎你所给出的两个例子都有效。如您所说，根据the docs，他们建议您在getItemCount中获取数据：

componentDidMount

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

所以你所做的就是将你的应用程序逻辑的一大块移动到它自己的模块（嗯，一个作为你的调度员一部分的模块）。它似乎可以满足您的需求：它可以在您的应用中使用，并且可以根据您的需要将其拉出或插回。我没有看到任何问题。它可能违反Flux的某些原则吗？也许，也许不是。不过，我怀疑这很重要。

ORIGINAL

我并不精通Flux架构，而是在他们的GitHub仓库（特别是Line 24 of TodoMVC）中查看Facebook的一个示例：

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

他们的示例并未显示function getTodoState() { return { allTodos: TodoStore.getAll(), areAllComplete: TodoStore.areAllComplete() }; }如何与服务器进行交互，但它看起来与初始状态相似，他们只是查询商店中的待办事项，然后进行更改，他们倾听并发出事件。

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

初始数据加载ReactJS

1 个答案:

修改

ORIGINAL