配列要素にidを追加し、id指定による削除追加

jun68ykt · May 5, 2019 · 8f197ad · 8f197ad
1 parent e78cc2a
commit 8f197ad
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 29 deletions.
diff --git a/src/actions/Todo.js b/src/actions/Todo.js
@@ -2,17 +2,20 @@
 export const addTodo = (todo) => {
   return { 
     type: 'ADD_TODO',
-    payload: {
-      todo: todo,
-    }
+    payload: { todo, }
   };
 }
 
 export const delTodo = (todo) => {
     return { 
       type: 'DEL_TODO',
-      payload: {
-        todo: todo,
-      }
+      payload: { todo, }
     };
-  }
+}
+
+export const delById = (id) => {
+  return {
+    type: 'DEL_BY_ID',
+    payload: { id }
+  };
+}
diff --git a/src/components/Todo.css b/src/components/Todo.css
@@ -0,0 +1,12 @@
+ul { list-style-type: none; }
+li { margin-bottom: 4px; }
+
+.todoId {
+    background-color: cyan;
+    padding: 2px;
+    margin-right: 3px;
+}
+
+.delete {
+    margin-right: 3px;
+}
diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -1,19 +1,33 @@
 import React from 'react';
+import './Todo.css';
 
 export default class Todo extends React.Component {
   state = {
     todo: ''
   }
 
   render() {
+    const { addTodo, delTodo, delById } = this.props;
+
     // StoreのTodoからリストを生成
-    const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
+    const list = this.props.todo.todoList.map(e =>
+      <li key={e.id}>
+        <button
+          className="delete"
+          onClick={() => delById(e.id)}
+        >
+          削除
+        </button>
+        <span className="todoId">{e.id}</span>
+        {e.todo}
+      </li>
+    );
 
     return (
       <div>
         <input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
-        <button onClick={() => this.props.addTodo(this.state.todo)}>追加</button>
-        <button onClick={() => this.props.delTodo(this.state.todo)}>削除</button>
+        <button onClick={() => addTodo(this.state.todo)}>追加</button>
+        <button onClick={() => delTodo(this.state.todo)}>削除</button>
         <ul>
           {list}
         </ul>

diff --git a/src/containers/Todo.js b/src/containers/Todo.js
@@ -12,6 +12,7 @@ const mapDispatchToProps = dispatch => {
   return {
     addTodo: (todo) => dispatch(actions.addTodo(todo)),
     delTodo: (todo) => dispatch(actions.delTodo(todo)),
+    delById: (id) => dispatch(actions.delById(id)),
   }
 }
 

diff --git a/src/reducers/Todo.js b/src/reducers/Todo.js
@@ -1,23 +1,36 @@
 import { Z_DEFAULT_STRATEGY } from "zlib"; // eslint-disable-line
 
 const initialState = {
-    todoList: [],
-  }
-
-  export const todoReducer = (state = initialState, action) => {
-    switch (action.type) {
-      case 'ADD_TODO':
-        return {
-          ...state,
-          todoList: state.todoList.concat([action.payload.id, action.payload.todo])
-        };
-      case 'DEL_TODO':
-        return {
-          ...state,
-          todoList: state.todoList.filter(todo => todo !== action.payload.todo)
-        };
-      default:
-        return state;
-    }
-  };
+  todoList: [],
+};
+
+let nextTodoId = 9001;
 
+export const todoReducer = (state = initialState, action) => {
+  let index, nextTodoList;
+
+  switch (action.type) {
+    case 'ADD_TODO':
+      return {
+        ...state,
+        todoList: [...state.todoList, { id: nextTodoId ++, todo: action.payload.todo }]
+      };
+    case 'DEL_TODO':
+      return {
+        ...state,
+        todoList: state.todoList.filter(e => e.todo !== action.payload.todo)
+      };
+    case 'DEL_BY_ID':
+      nextTodoList = [...state.todoList];
+      index = state.todoList.findIndex(e => e.id === action.payload.id);
+      if (index >= 0) {
+        nextTodoList.splice(index, 1);
+      }
+      return {
+        ...state,
+        todoList: nextTodoList
+      };
+    default:
+      return state;
+  }
+};