From db9f01b6c50bf155dce41a4c564354e9853a7b21 Mon Sep 17 00:00:00 2001
From: andy-williams <williams.andrew.lirio@gmail.com>
Date: Sat, 14 Feb 2015 21:33:40 +0000
Subject: [PATCH 1/2] #105 store to only refer to it's own state

---
 examples/todo-basic/app/app.jsx     | 36 ++++++++++++++++++++---------
 site/contents/guides/quick-start.md | 36 ++++++++++++++++++++---------
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/examples/todo-basic/app/app.jsx b/examples/todo-basic/app/app.jsx
index 5223699..88d6eb0 100644
--- a/examples/todo-basic/app/app.jsx
+++ b/examples/todo-basic/app/app.jsx
@@ -11,7 +11,8 @@ var constants = {
 
 var TodoStore = Fluxxor.createStore({
   initialize: function() {
-    this.todos = [];
+    this.todoId = 0;
+    this.todos = {};
 
     this.bindActions(
       constants.ADD_TODO, this.onAddTodo,
@@ -21,19 +22,30 @@ var TodoStore = Fluxxor.createStore({
   },
 
   onAddTodo: function(payload) {
-    this.todos.push({text: payload.text, complete: false});
+    var todo = {
+      id: this.todoId,
+      text: payload.text,
+      complete: false
+    };
+    this.todos[this.todoId] = todo;
+    ++this.todoId;
     this.emit("change");
   },
 
-  onToggleTodo: function(payload) {
-    payload.todo.complete = !payload.todo.complete;
+  onToggleTodo: function(id) {
+    this.todos[id].complete = !this.todos[id].complete;
     this.emit("change");
   },
 
   onClearTodos: function() {
-    this.todos = this.todos.filter(function(todo) {
-      return !todo.complete;
+    var keys = Object.keys(this.todos);
+    var todos = this.todos;
+    keys.forEach(function(key) {
+      if(todos[key].complete) {
+        delete todos[key];
+      }
     });
+
     this.emit("change");
   },
 
@@ -49,8 +61,8 @@ var actions = {
     this.dispatch(constants.ADD_TODO, {text: text});
   },
 
-  toggleTodo: function(todo) {
-    this.dispatch(constants.TOGGLE_TODO, {todo: todo});
+  toggleTodo: function(id) {
+    this.dispatch(constants.TOGGLE_TODO, id);
   },
 
   clearTodos: function() {
@@ -96,11 +108,13 @@ var Application = React.createClass({
   },
 
   render: function() {
+    var self = this;
+    var keys = Object.keys(this.state.todos);
     return (
       <div>
         <ul>
-          {this.state.todos.map(function(todo, i) {
-            return <li key={i}><TodoItem todo={todo} /></li>;
+          {keys.map(function(key) {
+            return <li key={key}><TodoItem todo={self.state.todos[key]} /></li>;
           })}
         </ul>
         <form onSubmit={this.onSubmitForm}>
@@ -147,7 +161,7 @@ var TodoItem = React.createClass({
   },
 
   onClick: function() {
-    this.getFlux().actions.toggleTodo(this.props.todo);
+    this.getFlux().actions.toggleTodo(this.props.todo.id);
   }
 });
 
diff --git a/site/contents/guides/quick-start.md b/site/contents/guides/quick-start.md
index 77e557b..e44214b 100644
--- a/site/contents/guides/quick-start.md
+++ b/site/contents/guides/quick-start.md
@@ -28,7 +28,8 @@ var constants = {
 
 var TodoStore = Fluxxor.createStore({
   initialize: function() {
-    this.todos = [];
+    this.todoId = 0;
+    this.todos = {};
 
     this.bindActions(
       constants.ADD_TODO, this.onAddTodo,
@@ -38,19 +39,30 @@ var TodoStore = Fluxxor.createStore({
   },
 
   onAddTodo: function(payload) {
-    this.todos.push({text: payload.text, complete: false});
+    var todo = {
+      id: this.todoId,
+      text: payload.text,
+      complete: false
+    };
+    this.todos[this.todoId] = todo;
+    ++this.todoId;
     this.emit("change");
   },
 
-  onToggleTodo: function(payload) {
-    payload.todo.complete = !payload.todo.complete;
+  onToggleTodo: function(id) {
+    this.todos[id].complete = !this.todos[id].complete;
     this.emit("change");
   },
 
   onClearTodos: function() {
-    this.todos = this.todos.filter(function(todo) {
-      return !todo.complete;
+    var keys = Object.keys(this.todos);
+    var todos = this.todos;
+    keys.forEach(function(key) {
+      if(todos[key].complete) {
+        delete todos[key];
+      }
     });
+
     this.emit("change");
   },
 
@@ -70,8 +82,8 @@ var actions = {
     this.dispatch(constants.ADD_TODO, {text: text});
   },
 
-  toggleTodo: function(todo) {
-    this.dispatch(constants.TOGGLE_TODO, {todo: todo});
+  toggleTodo: function(id) {
+    this.dispatch(constants.TOGGLE_TODO, id);
   },
 
   clearTodos: function() {
@@ -134,11 +146,13 @@ var Application = React.createClass({
   },
 
   render: function() {
+    var self = this;
+    var keys = Object.keys(this.state.todos);
     return (
       <div>
         <ul>
-          {this.state.todos.map(function(todo, i) {
-            return <li key={i}><TodoItem todo={todo} /></li>;
+          {keys.map(function(key) {
+            return <li key={key}><TodoItem todo={self.state.todos[key]} /></li>;
           })}
         </ul>
         <form onSubmit={this.onSubmitForm}>
@@ -189,7 +203,7 @@ var TodoItem = React.createClass({
   },
 
   onClick: function() {
-    this.getFlux().actions.toggleTodo(this.props.todo);
+    this.getFlux().actions.toggleTodo(this.props.todo.id);
   }
 });
 ```

From fe3c71352885cf4f81ff64e915309fe5673dd60c Mon Sep 17 00:00:00 2001
From: BinaryMuse <brandon@brandontilley.com>
Date: Sun, 5 Apr 2015 14:34:44 -0700
Subject: [PATCH 2/2] Minor changes to todo example improvements

---
 examples/todo-basic/app/app.jsx     | 26 +++++++++++++++-----------
 site/contents/guides/quick-start.md | 26 +++++++++++++++-----------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/examples/todo-basic/app/app.jsx b/examples/todo-basic/app/app.jsx
index 88d6eb0..d79ee14 100644
--- a/examples/todo-basic/app/app.jsx
+++ b/examples/todo-basic/app/app.jsx
@@ -22,25 +22,26 @@ var TodoStore = Fluxxor.createStore({
   },
 
   onAddTodo: function(payload) {
+    var id = this._nextTodoId();
     var todo = {
-      id: this.todoId,
+      id: id,
       text: payload.text,
       complete: false
     };
-    this.todos[this.todoId] = todo;
-    ++this.todoId;
+    this.todos[id] = todo;
     this.emit("change");
   },
 
-  onToggleTodo: function(id) {
+  onToggleTodo: function(payload) {
+    var id = payload.id;
     this.todos[id].complete = !this.todos[id].complete;
     this.emit("change");
   },
 
   onClearTodos: function() {
-    var keys = Object.keys(this.todos);
     var todos = this.todos;
-    keys.forEach(function(key) {
+
+    Object.keys(todos).forEach(function(key) {
       if(todos[key].complete) {
         delete todos[key];
       }
@@ -53,6 +54,10 @@ var TodoStore = Fluxxor.createStore({
     return {
       todos: this.todos
     };
+  },
+
+  _nextTodoId: function() {
+    return ++this.todoId;
   }
 });
 
@@ -62,7 +67,7 @@ var actions = {
   },
 
   toggleTodo: function(id) {
-    this.dispatch(constants.TOGGLE_TODO, id);
+    this.dispatch(constants.TOGGLE_TODO, {id: id});
   },
 
   clearTodos: function() {
@@ -108,13 +113,12 @@ var Application = React.createClass({
   },
 
   render: function() {
-    var self = this;
-    var keys = Object.keys(this.state.todos);
+    var todos = this.state.todos;
     return (
       <div>
         <ul>
-          {keys.map(function(key) {
-            return <li key={key}><TodoItem todo={self.state.todos[key]} /></li>;
+          {Object.keys(todos).map(function(id) {
+            return <li key={id}><TodoItem todo={todos[id]} /></li>;
           })}
         </ul>
         <form onSubmit={this.onSubmitForm}>
diff --git a/site/contents/guides/quick-start.md b/site/contents/guides/quick-start.md
index e44214b..30dbc6b 100644
--- a/site/contents/guides/quick-start.md
+++ b/site/contents/guides/quick-start.md
@@ -39,25 +39,26 @@ var TodoStore = Fluxxor.createStore({
   },
 
   onAddTodo: function(payload) {
+    var id = this._nextTodoId();
     var todo = {
-      id: this.todoId,
+      id: id,
       text: payload.text,
       complete: false
     };
-    this.todos[this.todoId] = todo;
-    ++this.todoId;
+    this.todos[id] = todo;
     this.emit("change");
   },
 
-  onToggleTodo: function(id) {
+  onToggleTodo: function(payload) {
+    var id = payload.id;
     this.todos[id].complete = !this.todos[id].complete;
     this.emit("change");
   },
 
   onClearTodos: function() {
-    var keys = Object.keys(this.todos);
     var todos = this.todos;
-    keys.forEach(function(key) {
+
+    Object.keys(todos).forEach(function(key) {
       if(todos[key].complete) {
         delete todos[key];
       }
@@ -70,6 +71,10 @@ var TodoStore = Fluxxor.createStore({
     return {
       todos: this.todos
     };
+  },
+
+  _nextTodoId: function() {
+    return ++this.todoId;
   }
 });
 ```
@@ -83,7 +88,7 @@ var actions = {
   },
 
   toggleTodo: function(id) {
-    this.dispatch(constants.TOGGLE_TODO, id);
+    this.dispatch(constants.TOGGLE_TODO, {id: id});
   },
 
   clearTodos: function() {
@@ -146,13 +151,12 @@ var Application = React.createClass({
   },
 
   render: function() {
-    var self = this;
-    var keys = Object.keys(this.state.todos);
+    var todos = this.state.todos;
     return (
       <div>
         <ul>
-          {keys.map(function(key) {
-            return <li key={key}><TodoItem todo={self.state.todos[key]} /></li>;
+          {Object.keys(todos).map(function(id) {
+            return <li key={id}><TodoItem todo={todos[id]} /></li>;
           })}
         </ul>
         <form onSubmit={this.onSubmitForm}>