Products.ts

export const Product = types.model('Product', {
  id: types.identifier,
  name: types.string,
  price: types.number,
})
.actions(self => ({
  update() {
  },
});

export const Products = types.model('Products', {
  items: types.map(Product),
})
.actions(self => ({
  loadProductById: flow(function* (productId: string) {
    const productData = fetch(`http://products.org/${productId}`).then(res => res.json());
    const product = self.items.get(productData.id);

    if (!product) {
      self.items.put(productData);
    } else {
      applySnapshot(product, productData);
    }

    return self.items.get(productData.id);
  }),
})
.views(self => ({
  getOrLoadById(productId: string) {
    const product = self.items.get(productId);
    if (!product) {
      setImmediate(() => self.loadProductById(productId));
    }
    return movie;
  },
}))
.create();

Screen.tsx

@observer
export class Screen extends React.Component {
  render() {
    const product = Products.getOrLoadById(this.props.id);
    return (
      <div>Product Name: {product.name}</div>
    );
  }
}