-
Notifications
You must be signed in to change notification settings - Fork 7
Basic Implementation
ndreckshage edited this page Aug 10, 2014
·
2 revisions
app/router.js
module.exports = function (match) {
// defines route, can navigate to localhost:3030/books/5
// books/show correlates with routes/books/show.js
match('/books/:id', 'books/show');
};
app/routes/books/show.js
var isomorphic = require('isomorphic');
var BookService = isomorphic.require('services/book-service');
// (optional) specify which component to render in components directory
// correlates with components/books/show.jsx
module.exports.render = 'books/show';
// (optional) inline critical css in the header, load all async.
// not specifying will load all styles in header.
// correlates with assets/stylsheets/critical/books/show.styl
module.exports.criticalCSS = 'books/show';
// (optional) promise to resolve route.
// not specifying will immediately resolve.
module.exports.promise = function (id) {
return BookService.getById(id);
};
app/services/book-service.js
var isomorphic = require('isomorphic');
module.exports.getById = function (id) {
// return a promise to resolve the route
return new isomorphic.Promise(function (resolve, reject) {
isomorphic.request.get('/books/' + id, function (err, res) {
if (err) {
reject(err);
} else {
resolve(res);
}
});
});
};
app/components/books/show.jsx
/**
* @jsx React.DOM
*/
var isomorphic = require('isomorphic');
var React = isomorphic.React;
var BookActions = isomorphic.require('actions/book-actions');
module.exports = React.createClass({
componentDidMount: function () {
// Server / client triggers action to be dispatched
BookActions.fetchedId(this.props);
},
render: function () {
return (
<div>
<p>{this.props.title}</p>
<p>{this.props.author}</p>
</div>
);
}
});
app/actions/book-actions.js
var isomorphic = require('isomorphic');
var AppDispatcher = isomorphic.require('dispatcher/app-dispatcher');
var BookConstants = isomorphic.require('constants/book-constants');
module.exports = {
fetchedId: function (data) {
// dispatches event to any stores that are listening
AppDispatcher.handleServerAction({
actionType: BookConstants.BOOK_FETCHED_ID,
book: data.book
});
}
}
app/stores/book-store.js
var isomorphic = require('isomorphic');
var AppDispatcher = isomorphic.require('dispatcher/app-dispatcher');
var BookConstants = isomorphic.require('constants/book-constants');
var EventEmitter = require('events').EventEmitter;
var merge = require('react/lib/merge');
var _books = {};
var BookStore = merge(EventEmitter.prototype, {
addBook: function (book) {
_books[book.id] = book;
this.emitChange();
},
emitChange: function () {
this.emit('change');
}
});
// Register to handle all updates
AppDispatcher.register(function(payload) {
switch (payload.action.actionType) {
case BookConstants.BOOK_FETCHED_INDEX:
BookStore.addBook(payload.action.book);
break;
default:
return true;
}
return true;
});
module.exports = BookStore;
And so on and so forth...