more docs updates

docs/class_example.md

@@ -8,6 +8,7 @@ This also shows how you can add instance methods to the items that you inject in
 ```javascript
 import {computed} from 'mobx';
 import {MobStore} from 'mobstore';
+import api from 'fictional-api'; // MobStore does not do any network requests.
 
 class ItemStore extends MobStore {
 
@@ -22,25 +23,47 @@ class ItemStore extends MobStore {
           return this.created_at > 10.days.ago // pseudo-code but you get the idea.
         }
       }
-    })
-
-    // use itemStore.newItems in a view. Then, whenever any item's data is updated,
-    // this will automatically recompute and re-render your view, if the result
-    // of this filtered list changed.
-    @computed get newItems() {
-      return this.items.filter((item) => {
-        return item.isNew();
+    });
+
+    extendObservable(this, {
+      progress: false,
+      errorMessage: null
+    });
+  }
+
+  // use itemStore.newItems in a view. Then, whenever any item's data is updated,
+  // this will automatically recompute and re-render your view, if the result
+  // of this filtered list changed.
+  @computed get newItems() {
+    return this.items.filter((item) => {
+      return item.isNew();
+    });
+  }
+
+  // call this whenever you want to get new items from the server, or update with
+  // any changes since you last checked.
+  fetchAllItems() {
+    api.get('/items.json')
+      .then(({data}) => {
+        this.inject(data); // assuming data is an array of item objects, or a single object
+      })
+  }
+
+  // here is your flux async action. it's much simpler now, with mobx and mobstore.
+  // this method is the "action creator". to create the action, just call the method.
+  // setting the data is your "reducer" -- it changes the data. The UI is updated automatically.
+  createItem(some_form_data) {
+    this.progress = true;
+    api.post('/items', some_form_data)
+      .then(({data}) => {
+        this.inject(data);
+        this.progress = false;
+        this.errorMessage = null;
+      })
+      .catch(({errorMessage}) => {
+        this.progress = false;
+        this.errorMessage = errorMessage;
       });
-    }
-
-    // call this whenever you want to get new items from the server, or update with
-    // any changes since you last checked.
-    fetchAllItems() {
-      fetch('/items.json')
-        .then(({data}) => {
-          this.inject(data); // assuming data is an array of item objects, or a single object
-        })
-    }
   }
 
 }
@@ -50,6 +73,16 @@ class ItemStore extends MobStore {
 const itemStore = new ItemStore();
 
 //...
+```
+
+## React Component
+
+Here's how you could use the reactive data from the store above in a React component. Notice how we just supply the `itemStore`'s computed/observable values directly. There is no other boilerplate needed. Hook up a form submission to the `createItem` method and watch your list view update automatically.
+
+In real life you'd probably only want the parent "container component" to import and use the store directly. See [Container Components](https://medium.com/@learnreact/container-components-c0e67432e005#.nms4vveql).
+
+
+```javascript
 
 @observer
 class NewItemList extends React.Component {
@@ -62,6 +95,10 @@ class NewItemList extends React.Component {
   render() {
     return (
       <div>
+        <ProgressSpinner visible={itemStore.progress} />
+        <ErrorMessage
+          visible={itemStore.errorMessage && itemStore.errorMessage.length}
+          message={itemStore.errorMessage} />
         {itemStore.newItems.map(this.renderItem)}
       </div>
     );