Question

I have to render jsx components dynamically like this:

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

from data like:

{
"document": {

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

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

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

Which(whole document) comes from single service call now my every component like document, frame, page, image have respective stores like document store, page store etc. When i receive data from api i call action to update document store but cant figure out how to update other nested component stores.

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

source of truth

and that is why want to update store with data and then use store to set state of my component.

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". I believe i am missing a core point but what is it.

Answer 1

但是，如果我尝试通过文件存储中的操作更新页面存储，然后从页面存储更新帧存储反应会给我错误＆＃34;无法在调度中间发送＆＃34;。

你确实错过了核心观点。

助焊剂的目的是拥有单向数据流。每个助焊剂流应只接收来自另一个位置的信息。

因此，您的商店应仅从Dispatcher接收信息，并且仅将数据发送到组件。您试图与您的商店进行交谈，或让您的商店向Dispatcher发送信息。这些都不被接受。

相反，如果您希望它们都使用这些数据，只需让您的Page Store和Frame Store监听相同的调度，并且每个都以自己的方式响应。

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

如果我使用道具将数据发送到嵌套的子组件，我认为我违反了事实来源

都能跟得上！

在理想的通量流中，只有一个组件应与商店对话。此组件称为＆＃34; container＆＃34;，并作为整个应用程序的顶级父级。然后成为所有孩子的真相来源，通过道具将信息传递给他们。

Here是对Flux文档的描述。

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

1 个答案: