React SSR 与嵌套的 Mobx 商店

Question

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

我的店铺示例：

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

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

Answer 1

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

你可以有一个特殊的函数来创建你的 root 商店，这取决于函数是被调用 with 还是 without 数据，它调用根存储 hydration 方法。然后根存储在子存储实例化后调用它们的 hydration 方法。 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 函数。

React SSR 与嵌套的 Mobx 商店

React SSR with nested Mobx stores

reactjs

server-side-rendering

mobx

mobx-react