MobX -重置所有存储可观察对象回到初始状态

MobX - Reset all store observables back to initial state?

本文关键字：对象 观察 初始状态 存储 -重 MobX      更新时间：2023-09-26

给定MyQuestionStore store:

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/等..)的正确方法是什么?

注:像MyQuestionStore.reset()的东西，例如我认为将是一个很好的MobX方式，但我不认为它存在。我必须编写一个名为reset的操作，并手动将每个可观察对象重置回其初始状态。我不认为这将是正确的方式，因为如果我添加更多的observables，我将不得不手动将它们添加到reset动作每次。

EDIT:这是一个旧的答案，在新版本的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 = '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更好的方法。我将把这个问题保留到现在，希望有一个更好的DRY答案。

如果您不需要深度重置，mobx-utils中的createViewModel实用程序可能会派上用场:https://github.com/mobxjs/mobx-utils/#createviewmodel

为什么不采用以下方法

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;
相关文章：