使用Asp.net Boilerplate向场景注入多个商店

Question

将多个store注入场景的正确方法是什么?我找不到任何相关的例子。每个人都只在一个场景中注入一个商店。关于在mobx-react中使用store, Asp.net样板中是否有规则或概念?

İnjecting到组件

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 ()
}
}

定义存储类

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';
}

Answer 1

如果需要的话，注入几个store是完全可以的。例如，你甚至可以让RootStore组合所有内容，并在每个组件中注入每个存储。

现代的方法是使用本文档

中描述的钩子。这样你的组件看起来就简单多了:

const Refineries = observer(() => {
const { refineryStore, userStore } = useStores()
return (
<div>
...
</div>
)
})

虽然它会要求你使用功能组件而不是类，所以如果你有一个大的遗留应用程序并且没有太多时间进行重构，你仍然可能想坚持使用inject。