初始数据加载ReactJS

Initial data loading ReactJS

本文关键字：ReactJS 加载 数据      更新时间：2023-09-26

我想执行一些初始数据加载时，我的第一个路由呈现(例如，我想加载新闻文章列表)

我制作了一个名为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)

欢迎任何关于此问题的反馈或对本代码的改进

EDIT

这不是违反通量原理吗?

也许，也许不是。看起来Flux很灵活。从我的理解来看，它更像是一个原则框架，而不是一个严格的"协议"。很难说，但看起来你给出的两个例子都行得通。就像你说的，根据文档，他们建议在componentDidMount:

中获取数据
componentDidMount: function() {
    $.get(this.props.source, function(result) {
    // ...

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

因此，您所做的是将应用程序逻辑的一个很好的块移动到它自己的模块中(好吧，一个模块是您的调度程序的一部分)。它似乎可以满足你的需求:它可以在你的应用程序中使用，并且可以在你认为合适的情况下拔出或插入。我看不出有什么不妥。它会违背Flux的某些原理吗?也许是，也许不是。但我怀疑这有什么关系。

<标题>原始h1> 不是很精通Flux架构，但看看Facebook的一个例子在他们的GitHub repo(特别是，TodoMVC的第24行):

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

他们的例子并没有显示TodoStore是如何与服务器交互的，但是看起来它们的初始状态，它们只是简单地查询存储中的todo，然后对于更改，它们侦听并发出事件。

因此，就获取初始状态而言，看起来他们的示例显示了直接查询存储。显然，从他们做那个例子到现在，可能已经发生了变化，但可能值得研究一下Flux仓库中的一些例子，以了解它是如何设计的。

相关文章：