如何在通量存储中异步加载初始状态？

Posted 2023-02-22

【中文标题】如何在通量存储中异步加载初始状态？

【英文标题】：How to load initial state in a flux store asynchronously?

【发布时间】：2016-08-27 10:42:54

【问题描述】：

到目前为止，我构建的 react+flux 应用程序，根据应用程序的要求构建商店的初始状态很容易。我可以只使用简单的 JS 对象，或者如果需要持久化状态，我使用具有同步 api 的 localStorage，从而导致在调用 getInitialState 时状态可用。

getInitialState() 
   return State.getInitialState();//synchronous method which returns state

但是，根据当前的要求，我必须从 indexeddb 中保存和检索状态，它的 api 是异步的。因此，我目前得到的 intialState 是未定义的，这会导致不变的违规错误。

是否可以异步加载 store 中的 initialState？

【问题讨论】：

两个选项：为应用程序提供一个本地初始状态，直到异步调用完成，或者，为组件提供足够的逻辑来处理不完整的状态。例如，在我最近构建的一个应用程序中，我异步加载图形数据。每个 Graph 组件都会显示一条加载消息，直到它的 props 数据数组有数据为止，因为每个组件都知道它的 props 数据数组永远不会为空。

查看mern 的服务器端渲染示例。没有正确的方法，但我认为这些例子似乎特别明智。

【参考方案1】：

假设您的商店有一个 getInitialState() 方法。并返回一些包含存储中所有数据的对象。您应该在您的组件应具有的商店中指定默认值。

class ExampleStore 
    constructor()
        this.something = false
        this.somethingElse = false
        this.someData = 
    
    getInitialState()
        return 
            something: this.something,
            somethingElse: this.somethingElse,
            someData: this.someData,
        ;
    

您之所以要使用此方法是因为您不想在每个组件中复制代码只是为了等待异步调用。让 store 返回一些默认值，然后当新数据进入并将其分配给 store 时，使用 store change 函数更新组件。