Skip to content

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...

Clone this wiki locally