MobX - 将所有商店可观察对象重置为初始状态?
MobX - Reset all store observables back to initial state?
给定一个 MyQuestionStore
商店:
class MyQuestionStore {
@observable asked = 'today';
@observable answered = false;
@observable question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
// some more initial state observables...
// some actions below...
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;
将所有存储可观察对象重置回其初始状态数据的正确方法是什么 ('today'/false/0/null/etc..)?
注意: 例如 MyQuestionStore.reset()
这样的东西我认为是一个很好的 MobX 方式,但我认为它不存在。我将不得不编写一个名为 reset
的操作,并手动将每个可观察对象重置回其初始状态。我认为这不是正确的方法,因为如果我添加更多 observables
,我每次都必须手动将它们添加到 reset
操作中。
我最终不得不在重置函数中重复默认的 observable,所以它看起来像这样:
class MyQuestionStore {
@observable asked = 'today';
@observable answered = false;
@observable question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
@action reset = () => {
this.asked = 'today';
this.answered = false;
this.question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
}
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;
我仍然觉得有比重复并保持干燥更好的方法。我暂时保留这个问题,希望有更好的 DRY 答案。
如果您不需要深度重置,mobx-utils
中的 createViewModel
实用程序可能会派上用场:https://github.com/mobxjs/mobx-utils/#createviewmodel
编辑:这是一个旧答案,在较新版本的 mobx 中不起作用。
如果使用reset()
初始化对象,可以避免重复代码。这就是我的意思:
import { extendObservable } from "mobx";
class MyQuestionStore {
constructor() {
this.reset();
}
@action reset() {
extendObservable(this, {
asked: 'today',
answered: false,
question: {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
});
}
}
要重置商店,您可以这样做:
const initialValue = {
name: 'John Doe',
age: 19,
}
@action reset() {
Object.keys(initialState).forEach(key => this[key] = initialState[key]);
}
您可以设置初始存储值:
class myStore {
constructor() {
extendObservable(this, initialState);
}
}
为什么不采用以下方法
class MyQuestionStore {
@observable asked;
@observable answered;
@observable question;
constructor() {
super()
this.init()
}
@action reset() {
this.init()
}
@action init() {
this.asked = 'today';
this.answered = false;
this.question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
}
// some more initial state observables...
// some actions below...
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;
给定一个 MyQuestionStore
商店:
class MyQuestionStore {
@observable asked = 'today';
@observable answered = false;
@observable question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
// some more initial state observables...
// some actions below...
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;
将所有存储可观察对象重置回其初始状态数据的正确方法是什么 ('today'/false/0/null/etc..)?
注意: 例如 MyQuestionStore.reset()
这样的东西我认为是一个很好的 MobX 方式,但我认为它不存在。我将不得不编写一个名为 reset
的操作,并手动将每个可观察对象重置回其初始状态。我认为这不是正确的方法,因为如果我添加更多 observables
,我每次都必须手动将它们添加到 reset
操作中。
我最终不得不在重置函数中重复默认的 observable,所以它看起来像这样:
class MyQuestionStore {
@observable asked = 'today';
@observable answered = false;
@observable question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
@action reset = () => {
this.asked = 'today';
this.answered = false;
this.question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
}
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;
我仍然觉得有比重复并保持干燥更好的方法。我暂时保留这个问题,希望有更好的 DRY 答案。
如果您不需要深度重置,mobx-utils
中的 createViewModel
实用程序可能会派上用场:https://github.com/mobxjs/mobx-utils/#createviewmodel
编辑:这是一个旧答案,在较新版本的 mobx 中不起作用。
如果使用reset()
初始化对象,可以避免重复代码。这就是我的意思:
import { extendObservable } from "mobx";
class MyQuestionStore {
constructor() {
this.reset();
}
@action reset() {
extendObservable(this, {
asked: 'today',
answered: false,
question: {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
});
}
}
要重置商店,您可以这样做:
const initialValue = {
name: 'John Doe',
age: 19,
}
@action reset() {
Object.keys(initialState).forEach(key => this[key] = initialState[key]);
}
您可以设置初始存储值:
class myStore {
constructor() {
extendObservable(this, initialState);
}
}
为什么不采用以下方法
class MyQuestionStore {
@observable asked;
@observable answered;
@observable question;
constructor() {
super()
this.init()
}
@action reset() {
this.init()
}
@action init() {
this.asked = 'today';
this.answered = false;
this.question = {
upvotes: 0,
body: null,
asker: null,
askerPoints: null,
askerBadges: null
}
}
// some more initial state observables...
// some actions below...
}
const myQuestionStore = new MyQuestionStore();
export default myQuestionStore;