Component doesn't re-render when store updates - Mobx

Question

I have three components; Form, Preview & AppStore. Clicking a button in Form adds an item to the store. This seems to work fine except that the list in the Preview component isn't updating/re-rendering when the store changes even though it has an @observer decorator. What am I missing?

Form has a button and handler function that adds an item to the store:

    @inject('AppStore')
    @observer class Form extends React.Component{

      handleAddItem= (item) =>{
        const {AppStore} = this.props;
        AppStore.addItem(item);
        console.log(AppStore.current.items)
      }

      render(){
        return(
              <button onClick={() => this.handleAddItem('Another Item')}>Add Item</button>

        )}
    }

Preview maps through the items (I'm using a drag and drop hoc so my code might look a bit odd)

  @inject('AppStore')
  @observer class Preview extends React.Component

...

return(
   <ul>
       {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
        ))}
  </ul>)

...

  return <SortableList items={AppStore.current.items} onSortEnd={this.onSortEnd} />;

Here is store:

import { observable, action, computed } from "mobx";

class AppStore {
  @observable other = {name: '', desc:'', items: [ 'item 1', 'item 2', 'item 3'], id:''}
  @observable current = {name: '', desc:'', items: [ 'item 1', 'item 2', 'item 3'], id:''}

  @action addItem = (item) => {
    this.current.items.push(item)
  }
}

const store = new AppStore();
export default store;

score 3 · Answer 1 · answered Dec 22 '18 at 14:49

I'm fairly certain this is a case where MobX doesn't extend observability all the way down into your current.items array.

Objects in MobX will extend observability when first constructed/initialized -- so current.items is an observable property in the sense that if you changed it's value to some other primitive, your component would re-render.

For example:

current.items = 1; // changing it from your array to some totally new value
current.items = []; // this _might_ also work because it's a new array

Similarly, if AppStore had a top-level observable items that you were changing, then calling items.push() would also work.

class AppStore {
    @observable items = [];

    @action additem = (item) => {
        this.items.push(item);
    }
}

The problem in your case is that items is buried one level deep inside an observable object -- so pushing items into the current.items array isn't changing the value of the property in a way that MobX can detect.

It's admittedly very confusing, and the common MobX pitfalls are sometimes hard to understand.

See also this line in the Object documentation:

Only plain objects will be made observable. For non-plain objects it is considered the responsibility of the constructor to initialize the observable properties.

Thanks, I've changed that now but it's still not re-rendering for some reason. Any ideas? — George Bleasdale, Dec 22 '18 at 15:11
I just noticed `AppStore.addBlock(item)` -- shouldn't that be `AppStore.additem(item)`? — arthurakay, Dec 22 '18 at 15:14
That's just a typo when I was copying the code to my question, I changed 'block' to 'item' for clarity. That error isn't present in the current code. — George Bleasdale, Dec 22 '18 at 15:16
The action is definitely working but for some reason the Preview component isn't re-rendering when the store updates. Perhaps I could get it to re-render when it's props change? — George Bleasdale, Dec 22 '18 at 15:24

score 0 · Answer 2 · answered Dec 27 '18 at 00:54

0

Try to replace your action to be:

@action addItem = (item) => {
   this.current.items = this.current.items.concat([item]);
}

Here instead of using push for mutating the property, use concat which is used to merge two arrays and return a whole new array with a new reference that MobX can react to.

answered Dec 27 '18 at 00:54

Mohamed Ibrahim Elsayed

2,734
3
23
43

That made everything add twice for some reason! – George Bleasdale Dec 27 '18 at 12:57
`item` is added twice to the array? – Mohamed Ibrahim Elsayed Dec 27 '18 at 13:09
Yep, it wasn't doing that before – George Bleasdale Dec 27 '18 at 13:20
Is your component now updating if you add item? – Mohamed Ibrahim Elsayed Dec 27 '18 at 13:48
I got around the problem by using componentWillReceiveProps. I read somewhere that, although the Mobx store is synchronous, the components still update asynchronously which may be what my problem was. – George Bleasdale Dec 27 '18 at 14:43

Component doesn't re-render when store updates - Mobx

2 Answers2