如何在 flux 中从单个 xhr 调用加载嵌套组件。

Question

我必须像这样动态渲染 jsx 组件：

<document>
    <page>
        <frame>
            <image>
            </image>
        </frame>
     </page>
</document>

来自以下数据：

{
"document": {

   "other properties" : ...
   "page": {

      "other properties" : ...
      "frame": {

         "other properties" : ...
         "image": {}
      }
    }
  }
}

哪个（整个文档）来自单个服务调用现在我的每个组件（如文档、框架、页面、图像）都有各自的存储，如文档存储、页面存储等。当我从 api 收到数据时，我调用操作来更新文档存储，但无法弄清楚如何更新其他嵌套组件存储。

如果我使用 props 将数据发送到嵌套的子组件，我认为我违反了

source of truth

这就是为什么要用数据更新存储然后使用存储来设置我的组件的状态。

但是，如果我尝试通过文档存储中的操作更新页面存储，然后从页面存储中更新框架存储，React 将给我错误 "cannot dispatch in middle of dispatch"。我相信我错过了一个核心点，但它是什么。

Answer 1

But if i try to update page store through action in document store and then update frame store from page store react will give me error "cannot dispatch in middle of dispatch".

你确实漏掉了一个核心点

通量的目的是获得 one-direction 数据流。每一条通量流应该只接收来自另一个位置的信息。

因此您的商店应该仅从调度程序接收信息并且应该仅向组件发送数据。您正在尝试 cross-talk 您的商店，或者让您的商店向调度员发送信息。这些都不被接受。

相反，如果您希望它们都使用此数据，只需让您的页面存储和框架存储都监听相同的调度并各自以自己的方式响应。

也就是说，我不会那样解决这个问题。

If i use props to send data to nested child component i think i am violating source of truth

不！

在理想的通量流中，只有一个组件应该与商店对话。此组件称为 "container"，作为整个应用程序的 top-level parent。然后它成为所有 children 的真实来源，通过道具将信息传递给他们。

Here 是来自 Flux 文档的描述。

如何在 flux 中从单个 xhr 调用加载嵌套组件。

How to load nested components from single xhr call in flux.

xmlhttprequest

flux

reactjs