在 Mobx-State-Tree 中声明全局操作的最佳方式是什么?
What's the best way to declare global actions in Mobx-State-Tree?
假设我在状态树的不同部分有一组动作,除了它们的逻辑外,还应该修改根节点上的某些 属性,例如,切换 loading 道具表明 UI 应该全局改变进度指示器的可见性。
const Contacts = types.model( 'Contacts', {
items: types.array(types.string)
}).actions(self=>({
show: flow(function* fetchData(){
// somehow indicate start of the loading process
self.items = yield fetch();
// somehow indicate end of the loading process
})
}));
const Store = types.model('AppStore', {
loading: types.optional(types.boolean, false),
contacts: Contacts
}).actions(self => ({
toggle() {
self.loading = !self.loading;
}
}));
虽然我当然可以使用getRoot这会给测试流程带来一定的不便并降低整体设计透明度。
可能使用惰性组合和导出实例以及来自模块的模型声明可以做到,但这对我来说看起来更奇怪。
在 Mobx-State-Tree 中处理此类问题的建议方法是什么?
我认为您可以在您的模型中使用 types.reference 和 types.late,它们沿着树向下访问根操作。
假设我在状态树的不同部分有一组动作,除了它们的逻辑外,还应该修改根节点上的某些 属性,例如,切换 loading 道具表明 UI 应该全局改变进度指示器的可见性。
const Contacts = types.model( 'Contacts', {
items: types.array(types.string)
}).actions(self=>({
show: flow(function* fetchData(){
// somehow indicate start of the loading process
self.items = yield fetch();
// somehow indicate end of the loading process
})
}));
const Store = types.model('AppStore', {
loading: types.optional(types.boolean, false),
contacts: Contacts
}).actions(self => ({
toggle() {
self.loading = !self.loading;
}
}));
虽然我当然可以使用getRoot这会给测试流程带来一定的不便并降低整体设计透明度。
可能使用惰性组合和导出实例以及来自模块的模型声明可以做到,但这对我来说看起来更奇怪。
在 Mobx-State-Tree 中处理此类问题的建议方法是什么?
我认为您可以在您的模型中使用 types.reference 和 types.late,它们沿着树向下访问根操作。