Mobx: Mobx store changes are not updated in other components

[michaelspeed]

i have two components in react using mobx

parent component :

@inject(['store'])
@observer
class parent extends Component{ 
    render(){
      console.log(this.props)  <-- NO changes registered with trigger (only the initial state is registered)
       return(
            <ChildComponent/>
       )
    }
}

child component :

@inject(['store'])
@observer
class Child extends Component{ 

this.props.someAction() <-- trigger

render(){
  console.log(this.props) <-- registers state changes from trigger
   return(
        <Some Component />
    )
  }
}

and a store

class store {
    @observable some =[]
    @action someAction(){}
 }

now when i change the state in the child component it gets registered, but the parent component does not register any change in state.

any ideas , whats wrong?

react: 16.2.0
mobx: 3.4.1
mobx-react: 4.3.5

[HamsterHuey]

Shouldn't you be decorating your components with @observer instead of @observable?

[michaelspeed]

sorry edited the question they are @observer my mistake,
but shouldn't the observer emit all changes in the store to all the components not the component which initiates the action? i am not getting any changes in other components

[HamsterHuey]

I'm still learning my way around MobX but I believe that this is because you don't dereference any observable property in your Parent component. See this for more information:
https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/react.md

I suspect that if you switch the console.log statement in the parent component to one of the following, it will also be re-rendered.

console.log(this.props.store.some)
console.log({...this.props.store})

I believe you are expecting that the update to the store via MobX action should automatically flow back to the parent component but I believe that since you aren't using setState, this isn't going to actually happen automatically. You need to ensure that all components that depend on any observable property actually dereferences the property so that the @observer decorator essentially lets MobX know which observable to subscribe to for any given component.

I could be entirely wrong, but try the above and see if it works out.

[michaelspeed]

i am also new to mobx so, still getting around, will try your way and let you know. thanks

[mweststrate]

@observer makes your component react to _any observable you use in render()_. None in your case, so as far as MobX is concerned, there is no reason why the component should re-render.

Whether a child should re-render is entirely the responsibility of that child (unless you choose to explicitly make it the responsibility of the parent)

Simply put: any component that renders observables should be an observer

[HamsterHuey]

@mweststrate - Just wanted to confirm that I understand how things work - In the toy example above, neither parent nor child component will actually render with changes to the store.some observable. The state is simply mutated by the call to this.props.someAction() when the child component is first mounted/rendered. However, this mutation will not be picked up by either of the components. Does that sound about right?

[mattruby]

Please create a small sample application preferably using codesandbox.io.
I can take a quick look.

On Thu, Jan 11, 2018 at 3:54 PM, Sudeep Mandal [e-mail]
wrote:

@mweststrate https://github.com/mweststrate - Just wanted to confirm
that I understand how things work - In the toy example above, neither
parent nor child component will actually render with changes to the
store.some observable. The state is simply mutated by the call to
this.props.someAction() when the child component is first
mounted/rendered. However, this mutation will not be picked up by either of
the components. Does that sound about right?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1302#issuecomment-357073432, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAIrcrN-pIeuQWAa5p0YUERH0doDmmOLks5tJoL8gaJpZM4RbNTv
.

--
-Matt Ruby-
[email protected]

[michaelspeed]

@inject(['store'])
@observer
 class parent extends Component{ 
    render(){
     return(
        <div>{this.props.store.some.slice().map(item => (
            <span>{item.name}</span>
        ))}</div>
    )
   }
}

is this adding an observer because its still not working

[michaelspeed]

its working, so we need a trigger in the parent component to trigger in any state changes?

[mweststrate]

Please don't comment on closed problems. Probably nobody will see it. File
a new issue instead including reproduction for problems like these

Op di 24 apr. 2018 om 05:24 schreef xgz123 [e-mail]:

same problem

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1302#issuecomment-383791403, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhAghSVK4nIv_Hm9y5_NAEJHhAHutks5trprkgaJpZM4RbNTv
.

[tregusti]

I am experiencing the same problem, and is interested what the solution was. Ping @michaelspeed.

[ItamarShDev]

@tregusti you need to reference a store @observable in the component's render method to subscribe to changes

[tregusti]

Thank you for clarifying this thread! However, for posterity, my mistake was that I had the withStyles helper as well as the observer function. The observer must be the innermost of all composing functions.

[quantumpotato]

@tregusti can you explain, please?
In my render I have

@observer class MyScreen
...
 <Observer>{() => {
          return <FlatList
       data={Mystore.items}
...

on a detail screen I create a new item and add to the MyStore.items array

When I pop back to that screen, the new item is not showing.

[craigthings]

I have the exact same problem as @quantumpotato and would love to know if there is an answer.

[ItamarShDev]

@quantumpotato @craigthings can you please create a small sandbox showing your problem?

[shohailahm]

new to mobx ,learnt it the hard way , any component that needs to render a observer should be wrapped in a observer, one more thing i would like to add that its the duty of child to take care of its render method .

[FredyC]

Anyone having a similar sort of "problems", please create new issues with proper details and reproduction. Very few people will see it here, so I am locking.