const { observable, asMap, computed, action } = mobx;

const { observer } = mobxReact;

​

class BookStore {

  @observable booksSortedIdArray = ["88cd7621", "88cd7624", "88cd7623", "88cd7622"];

  @observable booksByIdMap = asMap({

    "88cd7621": {

      "id": "88cd7621",

      "title": "The Secret"

    },

    "88cd7622": {

      "id": "88cd7622",

      "title": "The Alchemist"

    },

    "88cd7623": {

      "id": "88cd7623",

      "title": "Javascript"

    },

    "88cd7624": {

      "id": "88cd7624",

      "title": "PHP"

    }

  });

  @computed get byBookId() {

    return this.booksByIdMap.values().filter(b => this.booksSortedIdArray.includes(b.id));

  }

}

​

const store = new BookStore();

​

const App = observer(() => {

  return <div> 

    {store.byBookId.map(b => <div key={b.id}>{b.title}</div>)} 

  </div>;

});

​

ReactDOM.render(

  <App />,

  document.getElementById('app')

);