No callbacks

actions.js

import { Actions } from 'flummox';

export default class TodoActions extends Actions {
  constructor(db) {
    super();

    this.db = db;
  }

  async create(model) {
    model.id = Math.random(); // HACK: until flummox supports some way to identify models from begin to success

    const doc = {
      title: model.title,
    };

    const response = await this.db.post(doc);

    return {
      response,
      id: model.id,
    };
  }

}

flux.js

import { Flummox } from 'flummox';
import PouchDB from 'pouchdb';

import TodoActions from './todo/actions';
import TodoStore from './todo/store';

export default class Flux extends Flummox {
  constructor() {
    super();

    this.pouch = new PouchDB('todo');
    this.createActions('todo', TodoActions, this.pouch);
    this.createStore('todo', TodoStore, this);
  }
}

index.js

import React from 'react';
import FluxComponent from 'flummox/component';
window.React = React;

import Flux from './flux';

import ListView from './todo/list-view';

const flux = new Flux();

React.render(
  <FluxComponent
    flux={flux}
    connectToStores="todo"
  >
    <ListView/>
  </FluxComponent>,
  document.getElementById('container')
);

list-view.js

import React from 'react';

class Item extends React.Component {
  render() {
    return <li>{this.props.item.title}</li>;
  }
}

class ListView extends React.Component {
  handleClick(e) {
    this.props.flux.getActions('todo').create({title: prompt()});
  }

  render() {
    const items = this.props.todos
     .map(item => <Item key={item.id} item={item} />);

    return <section>
      <header>Hello</header>
      <main>
        <ul>
          {items}
        </ul>
      </main>
      <footer>
        <button onClick={this.handleClick.bind(this)}>Add</button>
      </footer>
    </section>;
  }
}

export default ListView;

store.js

import { Store } from 'flummox';
import { Record, Map } from 'immutable';

class Item extends Record({id: null, title: '', pending: true}) {}

export default class TodoStore extends Store {

  constructor(flux) {
    super();

    const actionIds = flux.getActionIds('todo');
    this.registerAsync(actionIds.create, this.handleCreateBegin, this.handleCreateSuccess, this.handleCreateFail);

    this.state = {
      todos: Map(),
    };
  }

  handleCreateFail() {
    throw arguments;
  }

  handleCreateSuccess({ id, response }) {
    let item = this.state.todos
      .get(id)
      .set('pending', false)
      .set('id', response.id); // TODO: learn how to use update

    const todos = this.state.todos.remove(id).set(response.id, item);

    this.setState({
      todos: todos,
    });
  }

  handleCreateBegin(model) {
    const item = new Item(model);

    this.setState({
      todos: this.state.todos.set(model.id, item),
    });
  }

}