Хранение и возврат компонентов 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 все заработало без проблем.
Уважаемые стаковчане, является ли это оптимальным методом хранения страниц? Может есть лучшие способы реализации?
