Update routing, implement Flux architecture. Closes kriasoft#14

README.md

@@ -24,16 +24,18 @@
 ├── /docs/                      # Documentation files
 ├── /node_modules/              # Node.js-based dev tools and utilities
 ├── /src/                       # The source code of the application
+│   ├── /actions/               # Action methods that allow to trigger a dispatch to stores
 │   ├── /assets/                # Static files which don't require pre-processing
-│   ├── /data/                  # Data access layer and models
-│   ├── /common/                # Utility classes etc.
+│   ├── /constants/             # Enumerations used in action methods and stores
 │   ├── /components/            # React components. E.g. Navbar.jsx
 │   ├── /images/                # Graphics (.png, .jpg, .svg etc.)
 │   ├── /layouts/               # Layouts for web pages
 │   ├── /pages/                 # Web pages. E.g. Profile.jsx (or .html, .jade etc.)
 │   ├── /services/              # Services and business logic
+│   ├── /stores/                # Stores contain the application state and logic
 │   ├── /styles/                # LESS style sheets (or SASS/SCSS, Stylus etc.)
-│   └── /app.jsx                # Entry point of your web application
+│   ├── /App.jsx                # Entry point of your web application
+│   └── /AppDispatcher.js       # The central hub that manages all data flow
 ├── /test/                      # Unit, integration and load tests
 │   ├── /e2e/                   # End-to-end tests
 │   └── /unit/                  # Unit tests

config/webpack.js

@@ -73,7 +73,7 @@ module.exports = function (release) {
           loader: 'url-loader?limit=10000&mimetype=image/png'
         },
         {
-          test: /\.jsx$/,
+          test: /\.(js|jsx)$/,
           loader: 'jsx-loader?harmony'
         }
       ]

gulpfile.js

@@ -77,10 +77,10 @@ gulp.task('images', function () {
   src.images = 'src/images/**';
   return gulp.src(src.images)
     .pipe($.changed(DEST + '/images'))
-    .pipe($.cache($.imagemin({
+    .pipe($.imagemin({
       progressive: true,
       interlaced: true
-    })))
+    }))
     .pipe(gulp.dest(DEST + '/images'))
     .pipe($.size({title: 'images'}));
 });

package.json

@@ -7,8 +7,9 @@
   "license": "MIT",
   "dependencies": {
     "bootstrap": "^3.2.0",
-    "react": "^0.11.2",
-    "react-router": "^0.7.0"
+    "director": "^1.2.3",
+    "flux": "^2.0.1",
+    "react": "^0.11.2"
   },
   "devDependencies": {
     "browser-sync": "^1.5.1",

src/App.jsx

@@ -1,21 +1,33 @@
-/**
- * @jsx React.DOM
- */
-
 'use strict';
 
 var React = require('react');
-var {Routes, Route} = require('react-router');
+var {Router} = require('director');
+var AppDispatcher = require('./AppDispatcher');
+var ActionTypes = require('./constants/ActionTypes');
 
 // Export React so the dev tools can find it
 (window !== window.top ? window.top : window).React = React;
 
-React.renderComponent(
-  <Routes location="history">
-    <Route name="app" path="/" handler={require('./layouts/Default.jsx')}>
-      <Route name="home" path="/" handler={require('./pages/Home.jsx')} />
-      <Route name="privacy" handler={require('./pages/Privacy.jsx')} />
-    </Route>
-  </Routes>,
-  document.body
-);
+function render(component) {
+  React.renderComponent(component(), document.body);
+}
+
+var routes = {
+  '/': () => render(require('./pages/Home.jsx')),
+  '/privacy': () => render(require('./pages/Privacy.jsx'))
+};
+
+var router = new Router(routes).configure({html5history: true}).init();
+
+AppDispatcher.register(function(payload) {
+
+  var action = payload.action;
+
+  switch (action.actionType) {
+    case ActionTypes.SET_CURRENT_ROUTE:
+      router.setRoute(action.route);
+      break;
+  }
+
+  return true; // No errors.  Needed by promise in Dispatcher.
+});

src/AppDispatcher.js

@@ -0,0 +1,39 @@
+/*
+ * A singleton that operates as the central hub for application updates.
+ */
+
+'use strict';
+
+var {Dispatcher} = require('flux');
+var PayloadSources = require('./constants/PayloadSources');
+var copyProperties = require('react/lib/copyProperties');
+
+var AppDispatcher = copyProperties(new Dispatcher(), {
+
+  /**
+   * @param {object} action The details of the action, including the action's
+   * type and additional data coming from the server.
+   */
+  handleServerAction: function(action) {
+    var payload = {
+      source: PayloadSources.SERVER_ACTION,
+      action: action
+    };
+    this.dispatch(payload);
+  },
+
+  /**
+   * @param {object} action The details of the action, including the action's
+   * type and additional data coming from the view.
+   */
+  handleViewAction: function(action) {
+    var payload = {
+      source: PayloadSources.VIEW_ACTION,
+      action: action
+    };
+    this.dispatch(payload);
+  }
+
+});
+
+module.exports = AppDispatcher;

src/actions/RouteActions.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var AppDispatcher = require('../AppDispatcher');
+var ActionTypes = require('../constants/ActionTypes');
+
+var AppActions = {
+
+  /**
+   * Set the current route.
+   * @param {string} route Supply a route value, such as `todos/completed`.
+   */
+  setRoute: function(route) {
+    AppDispatcher.handleViewAction({
+      actionType: ActionTypes.SET_CURRENT_ROUTE,
+      route: route
+    });
+  }
+
+};
+
+module.exports = AppActions;

src/components/Link.jsx

@@ -0,0 +1,30 @@
+/**
+ * @jsx React.DOM
+ */
+
+'use strict';
+
+var React = require('react');
+var RouteActions = require('../actions/RouteActions');
+
+var Link = React.createClass({
+  propTypes: {
+    to: React.PropTypes.string.isRequired,
+    children: React.PropTypes.component.isRequired
+  },
+  render() {
+    this.props.href =
+      this.props.to && this.props.to.lastIndexOf('/', 0) === 0 ?
+      this.props.to : '/' + this.props.to;
+
+    return this.transferPropsTo(
+      <a onClick={this.handleClick}>{this.props.children}</a>
+    );
+  },
+  handleClick(e) {
+    e.preventDefault();
+    RouteActions.setRoute(this.props.to);
+  }
+});
+
+module.exports = Link;

src/components/Navbar.jsx

@@ -5,14 +5,14 @@
 'use strict';
 
 var React = require('react');
-var {Link} = require('react-router');
+var Link = require('./Link.jsx');
 
 var Navbar = React.createClass({
   render() {
     return (
       <div className="navbar-top">
         <div className="container">
-          <Link className="navbar-brand row" to="home">
+          <Link className="navbar-brand row" to="/">
             <img src="/images/logo-small.png" width="38" height="38" alt="React" />
             {' Facebook React Starter Kit'}
           </Link>

src/components/NavbarSpec.jsx

@@ -5,7 +5,7 @@ describe('Navbar', () => {
 
   beforeEach(() => {
     Navbar = require('./Navbar.jsx');
-    component = new Navbar();
+    component = Navbar();
   });
 
   it('should create a new instance of Navbar', () => {

src/constants/ActionTypes.js

@@ -0,0 +1,6 @@
+module.exports = {
+
+  // Route action types
+  SET_CURRENT_ROUTE: 'SET_CURRENT_ROUTE'
+
+};

src/constants/PayloadSources.js

@@ -0,0 +1,4 @@
+module.exports = {
+  VIEW_ACTION: 'VIEW_ACTION',
+  SERVER_ACTION: 'SERVER_ACTION'
+};

src/layouts/Default.jsx

@@ -5,7 +5,7 @@
 'use strict';
 
 var React = require('react');
-var {Link} = require('react-router');
+var Link = require('../components/Link.jsx');
 var Navbar = require('../components/Navbar.jsx');
 
 var DefaultLayout = React.createClass({
@@ -19,13 +19,13 @@ var DefaultLayout = React.createClass({
             <p>Complex web apps made easy</p>
           </div>
         </div>
-        <this.props.activeRouteHandler />
+        {this.props.children}
         <div className="navbar-footer">
           <div className="container">
             <p className="text-muted">
               {' © KriaSoft • '}
-              <Link to="home">Home</Link> {' • '}
-              <Link to="privacy">Privacy</Link>
+              <Link to="/">Home</Link>{' • '}
+              <Link to="/privacy">Privacy</Link>
             </p>
           </div>
         </div>

src/pages/Home.jsx

@@ -5,40 +5,43 @@
 'use strict';
 
 var React = require('react');
+var Layout = require('../layouts/Default.jsx');
 
 var HomePage = React.createClass({
   render() {
     return (
-      <div className="container">
-        <div className="row">
-          <div className="col-sm-4">
-            <h3>Runtime Components</h3>
-            <dl>
-              <dt><a href="https://facebook.github.io/react/">React</a></dt>
-              <dd>A JavaScript library for building user interfaces, developed by Facebook</dd>
-              <dt><a href="https://github.com/rackt/react-router">React-Router</a></dt>
-              <dd>A complete routing library for React</dd>
-              <dt><a href="http://getbootstrap.com/">Bootstrap</a></dt>
-              <dd>CSS framework for developing responsive, mobile first interfaces</dd>
-            </dl>
-          </div>
-          <div className="col-sm-4">
-            <h3>Development Tools</h3>
-            <dl>
-              <dt><a href="http://gulpjs.com">Gulp</a></dt>
-              <dd>JavaScript streaming build system and task automation</dd>
-              <dt><a href="http://webpack.github.io/">Webpack</a></dt>
-              <dd>Compiles front-end source code into modules / bundles</dd>
-              <dt><a href="http://www.browsersync.io/">BrowserSync</a></dt>
-              <dd>A lightweight HTTP server for development</dd>
-            </dl>
-          </div>
-          <div className="col-sm-4">
-            <h3>Fork me on GitHub</h3>
-            <p><a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a></p>
+      <Layout>
+        <div className="container">
+          <div className="row">
+            <div className="col-sm-4">
+              <h3>Runtime Components</h3>
+              <dl>
+                <dt><a href="https://facebook.github.io/react/">React</a></dt>
+                <dd>A JavaScript library for building user interfaces, developed by Facebook</dd>
+                <dt><a href="https://github.com/rackt/react-router">React-Router</a></dt>
+                <dd>A complete routing library for React</dd>
+                <dt><a href="http://getbootstrap.com/">Bootstrap</a></dt>
+                <dd>CSS framework for developing responsive, mobile first interfaces</dd>
+              </dl>
+            </div>
+            <div className="col-sm-4">
+              <h3>Development Tools</h3>
+              <dl>
+                <dt><a href="http://gulpjs.com">Gulp</a></dt>
+                <dd>JavaScript streaming build system and task automation</dd>
+                <dt><a href="http://webpack.github.io/">Webpack</a></dt>
+                <dd>Compiles front-end source code into modules / bundles</dd>
+                <dt><a href="http://www.browsersync.io/">BrowserSync</a></dt>
+                <dd>A lightweight HTTP server for development</dd>
+              </dl>
+            </div>
+            <div className="col-sm-4">
+              <h3>Fork me on GitHub</h3>
+              <p><a href="https://github.com/kriasoft/react-starter-kit">github.com/kriasoft/react-starter-kit</a></p>
+            </div>
           </div>
         </div>
-      </div>
+      </Layout>
     );
   }
 });