Flux - 如何使用异步获取的数据初始加载 Store 数据

Question

使用：Vanilla React 和 Flux 火力基地

我正在努力使我的商店与实时更新保持同步，因此我一直按照本文Handling Synchronized Arrays with Real-Time Firebase Data 的说明进行操作

我已调用 WebAPI 实用程序类以获取初始数据，并将其放置在我的顶级组件的 componentWillMount 侦听器中，正如许多人所指示的那样。代码如下所示。

var MessageSection = require('./MessageSection.react');
var React = require('react');
var ThreadSection = require('./ThreadSection.react');
var ChatWebAPIUtils = require('../utils/ChatWebAPIUtils');
var ChatApp = React.createClass({

  componentWillMount: function(){
    ChatWebAPIUtils.getAllMessages(); **Here is my call to an action**
  }

  render: function() {
    return (
      <div className="chatapp">
        <ThreadSection />
        <MessageSection />
      </div>
    );
  }

});

module.exports = ChatApp;

问题是，即使我的商店会正确加载，看起来因为它是异步获取，所以会调用渲染组件，但数据仍未准备好。

在我的程序尝试呈现自身之前等待 store 初始化的传统方法是什么？

Answer 1

您也许可以为此使用组件状态。

getInitialState() {
    return {
        messagesLoaded: false,
        messages: [],
        threads: []
    }
},
onMessagesLoaded() {
    this.setState({
        messagesLoaded: true,
        messages: ChatWebAPIUtils.messages,
        threads: ChatWebAPIUtils.threads
    });
},
componentDidMount() {
    ChatWebAPIUtils.getAllMessages(this.onMessagesLoaded.bind(this))
},
render() {
    if(!this.state.messagesLoaded) {
        return (<div className="chatapp">Loading...</div>);
    }

    return (
        <div className="chatapp">
            <ThreadSection />
            <MessageSection />
        </div>
    );
}

您将初始状态设置为消息和线程的空数组。 一旦组件挂载，你就调用你的异步函数并向它传递一个回调函数，然后它会更新组件的状态——因此导致组件（以及接收新状态的子组件）更新。只要未加载数据 - 就会显示“正在加载”消息。

也应该可以在 componentWillMount() 部分调用您的 getMessages 函数。

我猜 MessagesSection 应该只显示当前选定线程的消息。我没有在示例中考虑到这一点 - 所以你也必须在某处添加这个逻辑。

编辑：添加了有关在加载数据之前阻止渲染子组件的信息。