使用嵌套的 Mobx 存储反应 SSR答案

【问题标题】：React SSR with nested Mobx stores使用嵌套的 Mobx 存储反应 SSR
【发布时间】：2020-12-02 04:40:54
【问题描述】：

可以用嵌套的 mobx 商店制作 ssr 应用吗？问题是如何序列化根存储并恢复它？

我的商店示例：

export default class RootStore {
     session = new SessionStore(this);
     ui = new UIStore();
}

export default class SessionStore {
    serverActionChecking = new ActionStore(this);
}

【问题讨论】：

标签： reactjs server-side-rendering mobx mobx-react

【解决方案1】：

如果您指的是在服务器上呈现内容的过程，然后在前端水合相同的商店（如 Next.js），您可以这样做：

您可以有一个特殊的函数来创建您的 root 存储，并且根据调用该函数是 with 还是 without 数据，它会调用根存储 @987654322 @ 方法。然后根存储在子存储实例化之后调用它们的hydration 方法。水合数据应该是一个对象，其键对应于子存储，因此您可以将特定键传递给特定存储。

function initializeStore(initialData ) {
  const store = new RootStore();

  if (initialData) {
    store.hydrate(initialData);
  }

  return store;
}


class RootStore {
  hydrate(data) {
    if(data.childStoreOne){
      this.childStoreOne.hydrate(data.childStoreOne);
    }
  }
}

class ChildStoreOne{
  hydrate(data){
    //do something with the data
  }
}

现在剩下要做的就是将hydration 数据发送到浏览器。其中一种解决方案是将数据嵌入到script 标签中，并将其传递给initialization 函数。

【讨论】：