Which is the correct way of injecting multiple stores into a scene? I couldn't find any example about this. Everyone injects just one store into a scene. Is there a rule or concept in Asp.net boilerplate about using stores with mobx-react?
İnjecting to component
import RefineryStore from '../../stores/refineryStore';
import Stores from '../../stores/storeIdentifier';
import UserStore from '../../stores/userStore';
export interface IRefineryProps {
refineryStore: RefineryStore;
userStore: UserStore;
}
@inject(Stores.RefineryStore, Stores.UserStore) // Why noone adds two stores into one inject?
@observer
class Refineries extends AppComponentBase<IRefineryProps, IRefineryState> {
public render() {
const { refineries } = this.props.refineryStore;
const { managers } = this.props.userStore;
return ()
}
}Defining Stores class
export default class Stores {
static AuthenticationStore: string = 'authenticationStore';
static RoleStore: string = 'roleStore';
static TenantStore: string = 'tenantStore';
static UserStore: string = 'userStore';
static SessionStore: string = 'sessionStore';
static AccountStore: string = 'accountStore';
static RefineryStore: string = 'refineryStore';
}It is totally fine to inject several stores if you need them. You can even have RootStore which combines everything and inject every store in every component, for example.
The modern approach would be to use hooks as described in this docs
With that way your components would look much simpler:
const Refineries = observer(() => {
const { refineryStore, userStore } = useStores()
return (
<div>
...
</div>
)
})
Although it would require you to use functional components instead of class, so you still might want to stick to inject if you have big legacy app and not much time for refactoring.