Хранение и возврат компонентов JSX (TSX) внутри хранилища MobX

Сейчас пишу одностраничный сайт с множеством "виртуальных" страниц на React, но, так как буду упаковывать в Electron, не делаю роуты, совсем (возможно, это ошибка). Посчитал, что состояние приложения достаточно хранить в сторах. На данный момент пытаюсь правильно и просто реализовать способ хранения текущей активной страницы и способы их переключения. Остановился на MobX, так как имею небольшой опыт разработки с его использованием.

Упрощенная структура приложения

Сначала я сделал так, чтобы у нас хранился порядковый номер страницы, для удобства закатал его в перечисление. Причем архитектурно у каждого из хранилищ есть свой счетчик страниц, как у AppStore, так и у WorkspaceStore. И свои, полностью одинаковые, методы переключения prev() и next():

export enum Pages {
  Intro,
  Work,
  Outro
}

export class AppStore {

  @observable currentPage: Pages = 0;

  @action prev() {
    this.currentPage--;
  }

  @action next() {
    this.currentPage++;
  }

}

Ну а в самом TSX я вызываю функцию свитча, которая в зависимости от страницы возвращает необходимый JSX.Element:

function getPage(page: number) {
  switch (page) {
    case Pages.Intro: return <Greeting/>;
    case Pages.Work: return <Workspace/>;
    case Pages.Outro: return <Conclusion/>;
  }
}

...

const App = observer(() => {
  const appStore = useContext(AppContext);
  return (
    <>
      {getPage(appStore.currentPage)}
    </>
  );
})

И после этого я задумался: "А нельзя ли сразу возвращать TSX элемент?". То есть мы просто помещаем все наши JSX.Element в массив в сторе, где индекс есть номер страницы. Затем через @computed метод возвращаем нужную страницу в наш TSX, пользуясь все той же переменной currentPage:

export class AppStore {

  private pages: JSX.Element[] = [<Greeting/>, <Workspace/>, <Conclusion/>];

  @observable currentPage = 0;

  @computed get page() {
    return this.pages[this.currentPage];
  }

  @action prev() {
    this.currentPage--;
  }

  @action next() {
    this.currentPage++;
  }
}

Переименовав AppStore.ts в AppStore.tsx все заработало без проблем.


Уважаемые стаковчане, является ли это оптимальным методом хранения страниц? Может есть лучшие способы реализации?


Ответы (0 шт):