CODEWITHSUNDEEP
reactjsmobxmobx-react
Malka P
Malka P

Reputation: 51

React Mobx - Change store from other store not render observer components

I have to update @observable variable by @action function on one store. When I call this @action from component class it change the @observable variable and re-render the @observer components. But when I try to Call this @action from @action in other store, by using callback, the @observable variable is changed but @observer components not re-render.

One Store:


class OneStore {
   @observable variable;

   @action
   setVariable(value) {
      this.variable = value;
   }
}

Other Store:

class OtherStore {

   @action
   setVariable(callBack, value) {
      callBack(value); //callBack is oneStore.setVariable
   }
}

@observer Component:

@inject('oneStore')
@observer
class ObserverComponent extends Component {

   render() {
      if (this.props.oneStore.variable) {
         return (
            <div> {this.props.oneStore.variable} <div/>
         );
      } else { return null; }
   }
}

I tried also to get the variable by @computed get function, it still not re-render.

Upvotes: 2

Views: 810

Answers (1)

Malka P
Malka P

Reputation: 51

I tried to add bound to the action - @action.bound and it simply works...

I think the this of OneStore was destroyed after nesting the callback.

The correct code is:

class OneStore {
   @observable variable;

   @action.bound
   setVariable(value) {
      this.variable = value;
   }
}

Upvotes: 3

Related Questions