Merge pull request reduxjs#1133 from arjunblj/use-id-in-example

Fix id-related bug in example ToDo app and update README

Author: gaearon

docs/basics/ExampleTodoList.md

@@ -52,12 +52,18 @@ export const VisibilityFilters = {
  * action creators
  */
 
+let nextTodoId = 0;
+
 export function addTodo(text) {
-  return { type: ADD_TODO, text }
+  return {
+    type: ADD_TODO,
+    id: nextTodoId++,
+    text
+  };
 }
 
-export function completeTodo(index) {
-  return { type: COMPLETE_TODO, index }
+export function completeTodo(id) {
+  return { type: COMPLETE_TODO, id }
 }
 
 export function setVisibilityFilter(filter) {
@@ -83,24 +89,39 @@ function visibilityFilter(state = SHOW_ALL, action) {
   }
 }
 
+function todo(state, action) {
+  switch (action.type) {
+    case ADD_TODO:
+      return {
+        id: action.id,
+        text: action.text,
+        completed: false
+      }
+    case COMPLETE_TODO:
+      if (state.id !== action.id) {
+        return state
+      }
+
+      return {
+        ...state,
+        completed: true
+      }
+    default:
+      return state
+  }
+}
+
 function todos(state = [], action) {
   switch (action.type) {
     case ADD_TODO:
       return [
         ...state,
-        {
-          text: action.text,
-          completed: false
-        }
+        todo(undefined, action)
       ]
     case COMPLETE_TODO:
-      return [
-        ...state.slice(0, action.index),
-        Object.assign({}, state[action.index], {
-          completed: true
-        }),
-        ...state.slice(action.index + 1)
-      ]
+      return state.map(t =>
+        todo(t, action)
+      )
     default:
       return state
   }
@@ -138,8 +159,8 @@ class App extends Component {
           } />
         <TodoList
           todos={visibleTodos}
-          onTodoClick={index =>
-            dispatch(completeTodo(index))
+          onTodoClick={id =>
+            dispatch(completeTodo(id))
           } />
         <Footer
           filter={visibilityFilter}
@@ -303,10 +324,11 @@ export default class TodoList extends Component {
   render() {
     return (
       <ul>
-        {this.props.todos.map((todo, index) =>
-          <Todo {...todo}
-                key={index}
-                onClick={() => this.props.onTodoClick(index)} />
+        {this.props.todos.map(todo =>
+          <Todo
+            key={todo.id}
+            {...todo}
+            onClick={() => this.props.onTodoClick(todo.id)} />
         )}
       </ul>
     )

examples/todos-with-undo/actions.js

@@ -8,12 +8,18 @@ export const VisibilityFilters = {
   SHOW_ACTIVE: 'SHOW_ACTIVE'
 }
 
+let nextTodoId = 0
+
 export function addTodo(text) {
-  return { type: ADD_TODO, text }
+  return {
+    id: nextTodoId++,
+    type: ADD_TODO,
+    text
+  }
 }
 
-export function completeTodo(index) {
-  return { type: COMPLETE_TODO, index }
+export function completeTodo(id) {
+  return { type: COMPLETE_TODO, id }
 }
 
 export function setVisibilityFilter(filter) {

examples/todos-with-undo/components/TodoList.js

@@ -5,10 +5,10 @@ export default class TodoList extends Component {
   render() {
     return (
       <ul>
-        {this.props.todos.map((todo, index) =>
+        {this.props.todos.map(todo =>
           <Todo {...todo}
-                key={index}
-                onClick={() => this.props.onTodoClick(index)} />
+                key={todo.id}
+                onClick={() => this.props.onTodoClick(todo.id)} />
         )}
       </ul>
     )

examples/todos-with-undo/containers/App.js

@@ -15,7 +15,7 @@ class App extends Component {
           onAddSubmit={text => dispatch(addTodo(text))} />
         <TodoList
           todos={visibleTodos}
-          onTodoClick={index => dispatch(completeTodo(index))} />
+          onTodoClick={id => dispatch(completeTodo(id))} />
         <Footer
           filter={visibilityFilter}
           onFilterChange={nextFilter => dispatch(setVisibilityFilter(nextFilter))}

examples/todos-with-undo/reducers.js

@@ -13,24 +13,38 @@ function visibilityFilter(state = SHOW_ALL, action) {
   }
 }
 
+function todo(state, action) {
+  switch (action.type) {
+    case ADD_TODO:
+      return {
+        id: action.id,
+        text: action.text,
+        completed: false
+      }
+    case COMPLETE_TODO:
+      if (state.id !== action.id) {
+        return state
+      }
+      return {
+        ...state,
+        completed: true
+      }
+    default:
+      return state
+  }
+}
+
 function todos(state = [], action) {
   switch (action.type) {
     case ADD_TODO:
       return [
         ...state,
-        {
-          text: action.text,
-          completed: false
-        }
+        todo(undefined, action)
       ]
     case COMPLETE_TODO:
-      return [
-        ...state.slice(0, action.index),
-        Object.assign({}, state[action.index], {
-          completed: true
-        }),
-        ...state.slice(action.index + 1)
-      ]
+      return state.map(t =>
+        todo(t, action)
+      )
     default:
       return state
   }