Class-based React components and composition vs. mixins

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxxor",
-  "version": "1.5.4",
+  "version": "1.6.0-alpha1",
   "main": "build/fluxxor.min.js",
   "description": "Flux architecture tools for React",
   "homepage": "",

examples/react-router/app/app.jsx

@@ -3,14 +3,12 @@ var React = require("react"),
     Fluxxor = require("../../../");
 
 var actions = require("./actions.jsx"),
-    routes = require("./routes.jsx"),
+    router = require("./router.jsx"),
     RecipeStore = require("./stores/recipe_store.jsx");
     RouteStore = require("./stores/route_store.jsx");
 
 require("./style.less");
 
-var router = Router.create({routes: routes});
-
 var stores = {
   recipe: new RecipeStore(),
   route: new RouteStore({router: router})

examples/react-router/app/components/empty_view.jsx

@@ -2,8 +2,10 @@ var React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler;
 
-module.exports = React.createClass({
-  render: function() {
+class EmptyView extends React.Component {
+  render() {
     return <RouteHandler {...this.props} />;
   }
-});
+}
+
+module.exports = EmptyView;

examples/react-router/app/components/recipe.jsx

@@ -1,34 +1,17 @@
 var React = require("react"),
     Router = require("react-router"),
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var RecipeStore = require("../stores/recipe_store.jsx");
 
-var Recipe = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
-  getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
-
-    return {
-      recipe: this.getFlux().store("recipe").getRecipe(params.id)
-    };
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    this.setState(this.getStateFromFlux());
-  },
+class Recipe extends React.Component {
+  constructor() {
+    super();
+    this.deleteRecipe = this.deleteRecipe.bind(this);
+  }
 
-  render: function() {
-    var recipe = this.state.recipe;
+  render() {
+    var recipe = this.props.recipe;
 
     if (recipe === RecipeStore.NOT_FOUND_TOKEN) {
       return this.renderNotFound();
@@ -52,23 +35,23 @@ var Recipe = React.createClass({
         </p>
       </div>
     );
-  },
+  }
 
-  renderIngredient: function(ingredient, idx) {
+  renderIngredient(ingredient, idx) {
     return (
       <li key={idx}>
         <strong>{ingredient.quantity}</strong> {ingredient.item}
       </li>
     );
-  },
+  }
 
-  renderNotFound: function() {
+  renderNotFound() {
     return this.renderWithLayout(
       <div>That recipe was not found.</div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -77,15 +60,24 @@ var Recipe = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  deleteRecipe: function(e) {
+  deleteRecipe(e) {
     if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
+      this.props.onDeleteRecipe(this.props.recipe.id);
     } else {
       e.preventDefault();
     }
   }
-});
+}
+
+Recipe.propTypes = {
+  recipe: React.PropTypes.object.isRequired,
+  onDeleteRecipe: React.PropTypes.func.isRequired
+};
+
+Recipe.contextTypes = {
+  router: React.PropTypes.func
+};
 
 module.exports = Recipe;

examples/react-router/app/components/recipe_adder.jsx

@@ -2,22 +2,18 @@ var t = require("tcomb-form"),
     React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var Recipe = require("../schemas/recipe.jsx"),
     RecipeForm = require("../forms/recipe_form.jsx");
 
-var RecipeAdder = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React)
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
+class RecipeAdder extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
 
-  render: function() {
+  render() {
     return this.renderWithLayout(
       <div>
         <form onSubmit={this.onSubmit}>
@@ -26,9 +22,9 @@ var RecipeAdder = React.createClass({
         </form>
       </div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -37,29 +33,30 @@ var RecipeAdder = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  onSubmit: function(e) {
+  onSubmit(e) {
     e.preventDefault();
 
     var newRecipe = this.refs.form.getValue();
     if (newRecipe) {
-      this.getFlux().actions.recipes.add(
+      this.props.onAddRecipe(
         newRecipe.name,
         newRecipe.description,
         newRecipe.ingredients,
         newRecipe.directions
       );
     }
-  },
-
-  deleteRecipe: function(e) {
-    if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
-    } else {
-      e.preventDefault();
-    }
   }
-});
+};
+
+RecipeAdder.propTypes = {
+  onAddRecipe: React.PropTypes.func.isRequired
+};
+
+RecipeAdder.contextTypes = {
+  router: React.PropTypes.func
+};
+
 
 module.exports = RecipeAdder;

examples/react-router/app/components/recipe_editor.jsx

@@ -2,37 +2,21 @@ var t = require("tcomb-form"),
     React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
 var Recipe = require("../schemas/recipe.jsx"),
     RecipeForm = require("../forms/recipe_form.jsx"),
     RecipeStore = require("../stores/recipe_store.jsx");
 
-var RecipeEditor = React.createClass({
-  mixins: [
-    Fluxxor.FluxMixin(React),
-    Fluxxor.StoreWatchMixin("recipe")
-  ],
-
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
-  getStateFromFlux: function() {
-    var params = this.context.router.getCurrentParams();
-
-    return {
-      recipe: this.getFlux().store("recipe").getRecipe(params.id)
-    };
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    this.setState(this.getStateFromFlux());
-  },
+class RecipeEditor extends React.Component {
+  constructor() {
+    super();
+    this.onSubmit = this.onSubmit.bind(this);
+    this.deleteRecipe = this.deleteRecipe.bind(this);
+  }
 
-  render: function() {
-    var recipe = this.state.recipe;
+  render() {
+    var recipe = this.props.recipe;
 
     if (recipe === RecipeStore.NOT_FOUND_TOKEN) {
       return this.renderNotFound();
@@ -50,15 +34,15 @@ var RecipeEditor = React.createClass({
         </p>
       </div>
     );
-  },
+  }
 
-  renderNotFound: function() {
+  renderNotFound() {
     return this.renderWithLayout(
       <div>That recipe was not found.</div>
     );
-  },
+  }
 
-  renderWithLayout: function(content) {
+  renderWithLayout(content) {
     return (
       <div>
         {content}
@@ -67,32 +51,42 @@ var RecipeEditor = React.createClass({
         {" | "}<Link to="add-recipe">Add New Recipe</Link>
       </div>
     );
-  },
+  }
 
-  onSubmit: function(e) {
+  onSubmit(e) {
     e.preventDefault();
 
     var newRecipe = this.refs.form.getValue();
     if (newRecipe) {
-      this.getFlux().actions.recipes.edit(
-        this.state.recipe.id,
+      this.props.onEditRecipe(
+        this.props.recipe.id,
         newRecipe.name,
         newRecipe.description,
         newRecipe.ingredients,
         newRecipe.directions
       );
 
-      this.context.router.transitionTo("recipe", {id: this.state.recipe.id});
+      this.context.router.transitionTo("recipe", {id: this.props.recipe.id});
     }
-  },
+  }
 
-  deleteRecipe: function(e) {
+  deleteRecipe(e) {
     if (confirm("Really delete this recipe?")) {
-      this.getFlux().actions.recipes.remove(this.state.recipe.id);
+      this.props.onDeleteRecipe(this.props.recipe.id);
     } else {
       e.preventDefault();
     }
   }
-});
+};
+
+RecipeEditor.propTypes = {
+  recipe: React.PropTypes.object.isRequired,
+  onEditRecipe: React.PropTypes.func.isRequired,
+  onDeleteRecipe: React.PropTypes.func.isRequired
+};
+
+RecipeEditor.contextTypes = {
+  router: React.PropTypes.func
+};
 
 module.exports = RecipeEditor;

examples/react-router/app/components/recipe_list.jsx

@@ -1,37 +1,32 @@
 var React = require("react"),
     Router = require("react-router"),
     RouteHandler = Router.RouteHandler,
-    Link = Router.Link,
-    Fluxxor = require("../../../../");
+    Link = Router.Link;
 
-var RecipeList = React.createClass({
-  mixins: [Fluxxor.FluxMixin(React), Fluxxor.StoreWatchMixin("recipe")],
-
-  getStateFromFlux: function() {
-    return {
-      recipes: this.getFlux().store("recipe").getRecipes()
-    };
-  },
-
-  render: function() {
+class RecipeList extends React.Component {
+  render() {
     return (
       <div>
         <h1>Recipes</h1>
-        <ul>{this.state.recipes.map(this.renderRecipeLink)}</ul>
+        <ul>{this.props.recipes.map(this.renderRecipeLink)}</ul>
         <div>
           <Link to="add-recipe">Add New Recipe</Link>
         </div>
       </div>
     );
-  },
+  }
 
-  renderRecipeLink: function(recipe) {
+  renderRecipeLink(recipe) {
     return (
       <li key={recipe.id}>
         <Link to="recipe" params={{id: recipe.id}}>{recipe.name}</Link>
       </li>
     );
   }
-});
+}
+
+RecipeList.propTypes = {
+  recipes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+};
 
 module.exports = RecipeList;