MobX - Reset all store observables back to initial state?

javascript mobx
Wonka picture Wonka · Sep 4, 2016 · Viewed 10k times · Source

Given a 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;

What would be the correct way to reset all store observables back to their initial states data ('today'/false/0/null/etc..)?

NOTE: Something like MyQuestionStore.reset() for example I think would be a good MobX way, but I don't think it exists. I would have to write an action called reset and manually reset each observable back to its initial state. I don't think that would be the right way, since if I add more observables, I would have to manually add them to the reset action every time.

Answer

Mouad Debbar picture Mouad Debbar · Sep 11, 2016

EDIT: this is an old answer that doesn’t work in newer versions of mobx.

If you use the reset() to initialize the object, you could avoid duplication of code. Here is what I mean:

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

Related questions

Can't call setState on a component that is not yet mounted

this is the first time I face this warning message. Can't call setState on a component that is not yet mounted. Follows: This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state …

Read More
How to inject mobx store into a stateless component

I am using mobx and react in a web application and I want to find a way to pass mobx store state to a stateless component. Below is my current component source code: import React from 'react'; import Panel from …

Read More
How to connect state to props with mobx.js @observer when use ES6 class?

Let's take a class like this in an app with React and React Router. @observer class Module1 extends React.Component { constructor (props) { super(props); //... } componentWillMount(){ //... } method(){ //... } otherMethod(){ //... } render() { return ( <ChildComp bars={this.props.bars}/>} ); } } And let's take a …

Read More