初始数据加载 ReactJS

Posted 2023-02-22

【中文标题】初始数据加载 ReactJS

【英文标题】：Initial data loading ReactJS

【发布时间】：2015-12-04 10:41:53

【问题描述】：

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

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

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

【参考方案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 中的一些示例，以了解它是如何设计的。

【讨论】：

这确实是个好方法。但是我想知道他们如何将服务器中的初始数据填充到该存储中。我检查了包含 API 调用的 Chat 应用程序，但是在这里它们只是将数据加载到主 app.js 中，如果您有多个页面 github.com/facebook/flux/blob/…，这将没有任何用处。

更新了我的原始帖子，提供了更多详细信息（抱歉，评论过多）

我是否也将获取的结果放入商店？

@MaximGeerinck，如果您不这样做，那么您的应用程序的其余部分将无法访问结果，对吧？

我猜是这样，但是，他们必须在商店实际被填满之前先访问该页面，这没有意义吗？