Mobx-State-Tree SSR двойной инициализации клиента и сервера - PullRequest
Новая
       21

Mobx-State-Tree SSR двойной инициализации клиента и сервера

0 голосов
/ 20 сентября 2018

Я использую mobx-state-tree в своем приложении NextJS с рендерингом на стороне сервера.Только на сервере я получаю API для загрузки некоторой информации и добавления в мой Магазин.Но после загрузки клиента мое хранилище очищается, потому что мне нужно создать экземпляр на сервере И клиенте.Это моя проблема.

Мой магазин: 

const Store = types
  .model('Store', {
    user: types.compose(User),
  });

const createStore = Store.create({
  user: {},
});

let store = null;

/**
 * Init store
 *
 * @param {bool} isServer
 * @param {object} snapshot
 */
const initStore = (isServer, snapshot = null) => {

  if (isServer) {
    store = createStore;
  }

  if (store === null) {
    store = createStore;
  }

  if (snapshot) {
    applySnapshot(store, snapshot);
  }

  return store;
};

Мой компонент на стороне клиента: 

  static getInitialProps({ req }) {
    const isServer = !!req;
    const store = initStore(isServer);

    return { initialState: getSnapshot(store), isServer }
  }

  constructor(props) {
    super(props);
    this.store = initStore(props.isServer, props.initialState);
  }

И мой пользовательский магазин: 

const User = types
  .model('User', {
    name: types.optional(types.string, ''),
    first_name: types.optional(types.string, ''),
  })
  .actions(self => {

    function load(name) {
      self.name = name;
    };

    async function afterCreate() {
      if (IS_SERVER) {
        const request = await callApi();
        return self.load(request.user.name);
      }
    };

    return {
      load,
      afterCreate
    };

  })
  .views(self => ({
    get userName() {
      return self.name;
    },
  }));

Мои действия self.load (имя) работает, но удаляются на загруженном клиенте.

Кто-нибудь знает, как я могу "сохранить" хранилище пользователей со стороны сервера?

Спасибо!

...