标签：reaction barStore RootStore MobX constructor rootStore class store
目录
背景
最近遇到一个问题：我们每个域（Domain）都维护自己的一个 MobX store，通常情况下不需要和其他 store 产生联系。比如我们是搜索引擎组（相当于一个域），只需要维护自己的 store 就行了。
但突然有个需求，需要我们这个 store 和用户账户组（另一个域）的 store 产生联系：当用户在同一个账户下切换使用者子账户时（比如一家几口人共用一个账户，但有各自的使用者子账户），我们就要加载相应子账户的搜索历史记录。
简单来说就是：在用户账户 store 中表示子账户的那个值发生变化时，我们搜索引擎 store 中的搜索历史记录就需要重新加载了。
那么，如何实现这个需求呢？
RootStore 模式
首先，为了能够基于另一个 store 的状态来触发事件，首先需要能够访问另一个 store。
应该有不止一种方法可以实现这个目的，但 MobX 官网 推荐的方式是 RootStore 模式。
简单来说就是，每个真正使用的 store 都是 rootStore 的一个属性，而它们又都把 rootStore 作为自己的一个属性来储存：
class RootStore {
constructor() {
this.fooStore = new FooStore(this)
this.barStore = new BarStore(this)
}
}
class FooStore {
constructor(rootStore) {
// 可以通过 this.rootStore.barStore 来访问 barStore
this.rootStore = rootStore
}
}
class BarStore {
constructor(rootStore) {
// 可以通过 this.rootStore.fooStore 来访问 fooStore
this.rootStore = rootStore
}
}
这样一来，通过 rootStore 这个中介，每个 store 就都可以访问到其他任何一个 store 了。
Reaction
那么如何根据另一个 store 中某个值的变化，触发本 store 的事件呢？
只需要使用最基础的 reaction 就可以了。类似于下面这样：
class RootStore {
constructor() {
this.fooStore = new FooStore(this)
this.barStore = new BarStore(this)
}
}
class FooStore {
constructor(rootStore) {
this.rootStore = rootStore
reaction(
// 第一个参数是一个函数，返回你想监测的值
// 在这里就是另一个 store 的 someValue
() => this.rootStore.barStore.someValue,
(value) => {
// 根据更新之后的值，执行一些逻辑
}
);
}
}
class BarStore {
public someValue
constructor(rootStore) {
makeAutoObservable(this, {
someValue: observable,
});
this.rootStore = rootStore
}
}
参考链接
MobX 官网：Combining multiple stores
In mobX can a store “listen” to other another store, and execute a query whenever the other store changes?
Running side effects with reactions
标签：reaction,barStore,RootStore,MobX,constructor,rootStore,class,store 来源： https://blog.csdn.net/VoisSurTonChemin/article/details/122762220
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。