component doesn't re-render when store udates mobx

Question

I made a store, with one field and one action. However, when the event that triggers the action is triggered, the storage itself is not updated, and the component is not re-rendered.

store:

configure({ isolateGlobalState: true });

class CallStore {
  @observable call;

  constructor() {
    this.call = false;
  }

  @action turnOnCall = (isTrue) => {
    return this.call = isTrue;
  }
}

const callStore = new CallStore();

export default callStore;

Сomponent that needs to be updated:

 const App = (props) => {
  return props.call ? (   
    <main>
      <VideoFormContainer />
      <Video />
    </main>
  ) : (
    <main>
      <VideoFormContainer />
    </main>
  );
};

 export default App;

The container of this component:

    const AppContainer = inject('callStore')(observer(({ callStore }) => (
      <App call={callStore.call} />
    )));
    
export default AppContainer;

Сomponent that calls the action

import callStore from '../../stores/callStore';

    const someComponent = () => {
    return (
        <button className="header__form-button" onClick={callStore.turnOnCall(true)} type="submit">Join</button>
    )
}

Are you using MobX 6 or later versions? If yes, [have you seen this](https://stackoverflow.com/questions/65851639/mobx-observer-suddenly-not-rerendering-when-observable-changes)? You also want to give a function to `onClick`, not invoke it directly on render. I.e. `onClick={() => callStore.turnOnCall(true)}` — Tholle, Jan 25 '21 at 13:20
You're damn right. I'm using version 6.0.4, thanks for this link it helped! And about the transfer of the function, I just made a typo — Tushyte Svet, Jan 25 '21 at 13:33

score 1 · Accepted Answer · answered Jan 25 '21 at 13:40

1

The problem was in the absence of makeObservable in store.

constructor() {
   makeObservable(this);
}

answered Jan 25 '21 at 13:40

Tushyte Svet

41
4

component doesn't re-render when store udates mobx

1 Answers1