var React = require('react');
var { RouteHandler, Link, Route, DefaultRoute } = require('react-router');
var { AsyncInitialStateMixin } = require('async-react-router');

// Test Site's Handlers
var Page = React.createClass({
	render() {
		return (
			<div>
				<h2>Site Heading</h2>
				<nav>
					<ul>
						<li><Link to="p1">P1</Link></li>
						<li><Link to="p2">P2</Link></li>
						<li><Link to="p3">P3</Link></li>
					</ul>
				</nav>
				<RouteHandler {... this.props} />
			</div>
		);
	}
});

var PageOne = React.createClass({
	statics: {
		// INITIAL DATA, use local synchronous data
		getAsyncInitialState(props) {
			return props.dataSource? 
					props.dataSource.getData({from: 'ds1'}):
					{};
		}
	},
	mixins: [AsyncInitialStateMixin],
	render() {
		var state = this.state.PageOne;
		return (
			<div>
				<h4>Page One Header</h4>
				<article>
					{state && state.article? state && state.article: 'NO DATA'}
				</article>
			</div>
		);
	}
});

var PageTwo = React.createClass({
	statics: {
		// INITIAL DATA, use local asynchronous data
		getAsyncInitialState(props) {
			return props.dataSource? 
					props.dataSource.getDataAsync({from: 'ds2'}):
					Promise.resolve({});
		}
	},
	mixins: [AsyncInitialStateMixin],
	render() {
		var state = this.state.PageTwo;
		return (
			<div>
				<h4>Page Two Header</h4>
				<article>
					{state && state.article? state.article: 'NO DATA'}
				</article>
			</div>
		);
	}
});

var PageThree = React.createClass({
	statics: {
		// INITIAL DATA, use data from the server(asynchronously)
		getAsyncInitialState(props) {
			return props.lookup?
					props.lookup({from: 'ds3'}): 
					Promise.reject(new Error('No lookup function to use'));
		}
	},
	mixins: [AsyncInitialStateMixin],
	render() {
		var state = this.state.PageThree;
		return (
			<div>
				<h4>Page Three Header</h4>
				<article>
					<textarea 
						value={state && state.article? state.article: 'NO DATA'}
						ref="articleText"
						onChange={this.updateLocal}
					/>																		{/**/}
					<button onClick={this.updateServer}>Save</button>
				</article>
			</div>
		);
	},
	getArticleTextValue() {
		var node = React.findDOMNode(this.refs.articleText);
		return node.value;
	},
	updateLocal() {
		this.setState({article: this.getArticleTextValue()});
	},
	updateServer() {
		var payload = {
			actionType: 'a3',
			data: {article: this.getArticleTextValue()}
		};
		this.props.dispatch(payload)
			.then(() => this.props.lookup({from: 'ds3'}))
			.then((newState) => this.setState(newState));
	}
});

// Routes
var route = (
	<Route path="/" handler={Page}>
		<DefaultRoute name="p1" handler={PageOne} />
		<Route name="p2" handler={PageTwo} />
		<Route name="p3" handler={PageThree} />
	</Route>
);

/*------------------------------------------------------------------------------------------------*/
//	--- Exports ---
/*------------------------------------------------------------------------------------------------*/
module.exports.route = route;
@@ -32,22 +32,8 @@
 ar %7B
- RouteHandler,
  Lin
@@ -103,24 +103,31 @@
 InitialState
+Handler
 Mixin %7D = re
@@ -211,16 +211,58 @@
 Class(%7B%0A
+%09mixins: %5BAsyncInitialStateHandlerMixin%5D,%0A
 %09render(
@@ -474,17 +474,28 @@
 av%3E%0A%09%09%09%09
-%3C
+%7Bthis.getSub
 RouteHan
@@ -502,14 +502,9 @@
 dler
- %7B... 
+(
 this
@@ -509,20 +509,18 @@
 is.props
+)
 %7D
- /%3E
 %0A%09%09%09%3C/di
@@ -770,32 +770,39 @@
 syncInitialState
+Handler
 Mixin%5D,%0A%09render(
@@ -809,42 +809,8 @@
 ) %7B%0A
-%09%09var state = this.state.PageOne;%0A
 %09%09re
@@ -870,33 +870,29 @@
 icle%3E%0A%09%09%09%09%09%7B
-state && 
+this.
 state.articl
@@ -894,25 +894,21 @@
 rticle? 
-state && 
+this.
 state.ar
@@ -1221,32 +1221,39 @@
 syncInitialState
+Handler
 Mixin%5D,%0A%09render(
@@ -1260,42 +1260,8 @@
 ) %7B%0A
-%09%09var state = this.state.PageTwo;%0A
 %09%09re
@@ -1325,25 +1325,21 @@
 %3E%0A%09%09%09%09%09%7B
-state && 
+this.
 state.ar
@@ -1337,32 +1337,37 @@
 .state.article? 
+this.
 state.article: '
@@ -1709,16 +1709,23 @@
 ialState
+Handler
 Mixin%5D,%0A
@@ -1740,44 +1740,8 @@
 ) %7B%0A
-%09%09var state = this.state.PageThree;%0A
 %09%09re
@@ -1834,17 +1834,13 @@
 ue=%7B
-state && 
+this.
 stat
@@ -1850,16 +1850,21 @@
 rticle? 
+this.
 state.ar

Update Example