Store change doesn't re-render computed function in component

Question

I'm having problem with React/MobX seeing change in store from a Component. Here's what I've got:

• Store: Class for managing store (visibility of columns of my table), got @observable Map.

Whenever I click on any button element from list it changes status (store is being changed), but Buttons component does not re-render, so I see its value as an old one. After manually re-render (changing twice the state of showing buttons) list is rendered properly until I click again.

And here's the code that's making problem:

Store:

export default class ColumnStore {
    constructor(columns) {
        this.showed = extendObservable(new Map());
        columns.map(column => {
            this.showed.set(column.id, column.show);
        });
    }

    @action changeShow(showId, showValue) {
        if (this.showed.has(showId)) {
            this.showed.set(showId, showValue);
        }
    }
}

---

Solved

I figured it out. Unfortunately it wasn't the problem in code I presented =/

Problem was that my PHPStorm automatically added imports for mobx elements from ' mobx/lib/mobx ' (and should be just ' mobx '). That causes opening another mobx instance.

Answer 1

You need to change the constructor of your store to use observable instead of extendObservable for the creation of showed :

class ColumnStore {
  constructor(columns) {
    this.showed = observable(new Map());
    columns.map(column => {
      this.showed.set(column.id, column.show);
    });
  }

A more cleaner approach will be to use observable as a decorator:

class ColumnStore {
  @observable showed = new Map();

  constructor(columns) {
    columns.map(column => {
      this.showed.set(column.id, column.show);
    });
  }