MobX utils
npm install @jstoolkit/mobx-utils
Base classes and utilities of mobx stores and validable mobx models.
#### RootStore
``ts
import { action } from 'mobx';
import { BaseRootStore, NotificationsStore, WorkerStore } from '@vlazh/mobx-utils/stores';
import { JSONModel, JSONSerializable } from '@vlazh/mobx-utils/serialization';
import AuthStore from './AuthStore';
import AppStore from './AppStore';
import SignUpStore from './SignUpStore';
import SignInStore from './SignInStore';
export type RootStoreState = Pick
export default class RootStore extends BaseRootStore implements JSONSerializable
readonly _serializable = this;
readonly authStore: AuthStore;
readonly appStore: AppStore;
readonly signInStore: SignInStore;
readonly signUpStore: SignUpStore;
// ...
constructor(initialState: Partial
super();
const appNotificationsStore = this.createNotificationsStore();
const appWorkerStore = this.createWorkerStore();
this.authStore = new AuthStore(
this,
appNotificationsStore,
appWorkerStore,
initialState.authStore
);
this.appStore = new AppStore(
this,
appNotificationsStore,
appWorkerStore,
initialState.appStore
);
this.signInStore = new SignInStore(this, appNotificationsStore, appWorkerStore);
this.signUpStore = new SignUpStore(this, appNotificationsStore, appWorkerStore);
}
createNotificationsStore(): NotificationsStore
return new NotificationsStore
}
createWorkerStore
return new WorkerStore(this);
}
toJSON(): JSONModel
return {
appStore: this.appStore.toJSON(),
authStore: this.authStore.toJSON(),
};
}
}
`
#### AppStore
`ts
import { RequestableStore, NotificationsStore, WorkerStore } from '@vlazh/mobx-utils/stores';
import RootStore from './RootStore';
export default class AppStore
extends RequestableStore<
RootStore,
NotificationsStore
WorkerStore
>
implements JSONSerializable
readonly _serializable = this;
// ...
constructor(
rootStore: RootStore,
notifications: NotificationsStore
worker: WorkerStore
initialState?: JSONModel
) {
super(rootStore, notifications, worker);
if (initialState) {
// ...
}
}
@withRequest
// Keep live last result of call of loadData for 10min or while authStore.sessionId is changed.
memo: { lifetime: 60 * 10, inputs: (self) => [self.rootStore.authStore.sessionId] },
})
loadData = flow(function* loadData(this: AppStore) {
const { authStore } = this.rootStore;
if (authStore.isLoggedIn) {
const data = yield api.fetchSomeData();
// ...
} else {
const data = yield api.fetchOtherData();
// ...
}
});
toJSON(): JSONModel
return {
// ...
};
}
}
`
#### AppView
`tsx
import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
function AppView({ rootStore }: AppViewProps): JSX.Element {
const {
authStore,
appStore,
appStore: { notifications, worker },
} = rootStore;
useEffect(() => {
appStore.loadData();
}, [appStore, authStore.isLoggedIn]);
return (
);
}
export default observer(AppView);
``