MobX not updating component when observable gets updated.

[tusharchutani]

I just started using MobX so pardon me if I am missing something very trivial here. To get my feet wet I just built a simple add subtract project that makes use of contexts. There are 3 components I made AddButton, SubtractButton and Answer. All reading and updating an instance of a class that makes use of observable.

CodeSandbox: https://codesandbox.io/s/stoic-chandrasekhar-kz5e9?file=/src/App.tsx

The intention is to update the Answer component whenever the AnswerStore changes.

This is what the store looks like

export class AnswerStore {
  @observable
  answer = 0;

  @action
  add() {
    console.log("Adding 1 to ", this.answer);
    this.answer = this.answer + 1;
  }

  @action
  sub() {
    console.log("Subtracting 1 from ", this.answer);
    this.answer = this.answer - 1;
  }
}

const context = React.createContext({} as AnswerStore);
export const useStore = () => React.useContext(context);

Again I am not sure what I am missing here :/

[mweststrate]

You hardcoded the answer in the component; 10, instead of using the store, so not sure what you would expect?

…

On Tue, 19 Jan 2021, 20:19 Tushar Chutani, ***@***.***> wrote: I just started using MobX so pardon me if I am missing something very trivial here. To get my feet wet I just built a simple add subtract project that makes use of contexts. There are 3 components I made AddButton, SubtractButton and Answer. All reading and updating an instance of a class that makes use of observable. CodeSandbox: https://codesandbox.io/s/stoic-chandrasekhar-kz5e9?file=/src/App.tsx The intention is to update the Answer component whenever the AnswerStore changes. This is what the store looks like export class AnswerStore { @observable answer = 0; @action add() { console.log("Adding 1 to ", this.answer); this.answer = this.answer + 1; } @action sub() { console.log("Subtracting 1 from ", this.answer); this.answer = this.answer - 1; } } const context = React.createContext({} as AnswerStore); export const useStore = () => React.useContext(context); Again I am not sure what I am missing here :/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2732>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFAAYKR26EXC7435QTS2XSL5ANCNFSM4WJLVTUQ> .

[tusharchutani]

I am not sure why the Codesandbox didn't update but this was component.

import { observer } from "mobx-react-lite";
import React from "react";
import { useStore } from "./store";

const answer = observer(() => {
  const store = useStore()
  return <h1>Answer is: {store.answer}</h1>;
})
export default answer

I figured out the issue - I had to add

  constructor() {
    makeAutoObservable(this)
  }

to the answer store