day3 「Todo の更新機能の実装」の一例

src/features/todos/components/TodoList.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useAppSelector, useAppDispatch } from '../../../app/hooks';
-import { remove, selectTodos } from '../todosSlice';
+import { remove, update, selectTodos } from '../todosSlice';
 
 export const TodoList: FC = () => {
   const todos = useAppSelector(selectTodos);
@@ -43,7 +43,16 @@ export const TodoList: FC = () => {
                   <td>
                     <button
                       onClick={() => {
-                        //TODO: 更新機能の実装
+                        // ここでは決め打ちでtitleとbodyのみを更新しているが、
+                        // 最終的にはtitle, body, statusに好きな値を入力できるようにする
+                        const updateAction = update({
+                          id: todo.id,
+                          input: {
+                            title: '更新したtitle' + Date.now(),
+                            body: '更新したbody ' + Date.now(),
+                          },
+                        });
+                        dispatch(updateAction);
                       }}
                     >
                       更新

src/features/todos/crud/index.ts

@@ -1,2 +1,3 @@
 export { createTodo } from './create';
 export { removeTodo } from './remove';
+export { updateTodo } from './update';

src/features/todos/crud/update.ts

@@ -0,0 +1,9 @@
+import type { Todo } from '../types';
+import { getCurrentDateTime } from '../utils/date';
+
+export const updateTodo = (todo: Todo): Todo => {
+  return {
+    ...todo,
+    updatedAt: getCurrentDateTime(),
+  };
+};

src/features/todos/todosSlice.ts

@@ -1,8 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../../app/store';
-import type { TodoInput, Todo, TodoId } from './types';
-import { createTodo, removeTodo } from './crud';
+import type { TodoInput, Todo, TodoId, TodoUpdatePayload } from './types';
+import { createTodo, removeTodo, updateTodo } from './crud';
 
 export type TodoState = {
   todos: Todo[];
@@ -32,10 +32,21 @@ export const todoSlice = createSlice({
 
       state.todos[index] = removeTodo(todo);
     },
+    update: (state, action: PayloadAction<TodoUpdatePayload>) => {
+      const { id, input } = action.payload;
+      const index = state.todos.findIndex((todo) => todo.id === id);
+      const todo = state.todos[index];
+      if (!todo) return;
+
+      state.todos[index] = updateTodo({
+        ...todo,
+        ...input,
+      });
+    },
   },
 });
 
-export const { create, remove } = todoSlice.actions;
+export const { create, remove, update } = todoSlice.actions;
 
 export const selectTodos = (state: RootState) =>
   state.todos.todos.filter((todo) => todo.deletedAt === undefined);

src/features/todos/types.ts

@@ -1,5 +1,7 @@
 export type TodoId = string;
+
 export type DateTime = string;
+
 const TODO_STATUSES = [
   'waiting',
   'working',
@@ -8,6 +10,7 @@ const TODO_STATUSES = [
   'completed',
 ] as const;
 export type TodoStatus = typeof TODO_STATUSES[number];
+
 export type TodoInput = {
   id?: TodoId;
   title: string;
@@ -17,6 +20,7 @@ export type TodoInput = {
   updatedAt?: DateTime;
   deletedAt?: DateTime;
 };
+
 export type Todo = {
   id: TodoId;
   title: string;
@@ -26,3 +30,8 @@ export type Todo = {
   updatedAt?: DateTime;
   deletedAt?: DateTime;
 };
+
+export type TodoUpdatePayload = {
+  id: TodoId;
+  input: Partial<TodoInput>;
+};