import { molecule, useMolecule } from "react-molecule";
const Page = molecule()(PageComponent);

const PageComponent = () => {
  const molecule = useMolecule();
  // Use it
};

import { Agent } from "react-molecule";

// You define logic in Agents
class InvoiceLoader extends Agent {
  // This runs when the molecule is firstly initialised
  init() {
    this.loadInvoices();
  }

  loadInvoices() {
    const { store } = this.molecule;
    loadInvoiceQuery().then(result => {
      store.invoices = result;
    });
  }
}

import { molecule, useStore, useAgent } from "react-molecule";
import { observable } from "mobx";
import { observer } from "mobx-react";

// This initialises the molecule by injecting agents, and a reactive store
const InvoiceListPage = molecule(props => {
  return {
    agents: {
      // We want to have a single instance of Agent that can be configured
      invoiceLoader: InvoiceLoader.factory()
    },
    store: observable({
      invoices: []
    })
  };
})(InvoiceList);

const InvoiceList = observer(() => {
  // We can access the molecule's store directly
  const { invoices } = useStore();

  // We can also get access to the agents
  const invoiceLoader = useAgent("invoiceLoader");
  return (
    <ul>
      <li>
        <button onClick={() => invoiceLoader.loadInvoices()}>Refresh</button>
      </li>
      {invoices.map(invoice => {
        <InvoiceItem invoice={invoice} key={invoice._id} />;
      })}
    </ul>
  );
});