簡易版タスク管理機能をRedux Tool Kitで作成してみる②

はじめに

• 前回、Redux Tool Kitでstoreを作成したので、作成したstoreを利用したコンポーネントを作成してみる

コード

• app/features/task/TaskItem.jsというコンポーネントを作成する。このコンポーネントは１つのタスクを表示及び削除する/完了ステータスを更新するコンポーネントにする

import React from 'react'
import { useSelector } from 'react-redux'
import { selectTasks } from './taskSlice'
import { TaskItem } from './TaskItem'

export const TaskList = () => {
    // useSelectorでstoreに定義しているtasksを取得することができる
    const tasks = useSelector(selectTasks)
    return (
        <div>
            {
                tasks.map((task) => <TaskItem key={task.id} task={task} />)
            }
        </div>
    )
}

• app/features/task/TaskList.jsというコンポーネントを作成する。このコンポーネントは上記で作成したコンポーネントにstoreの情報を渡すコンポーネントにする

import React from 'react'
import { useDispatch } from 'react-redux'
import { doneTask, deleteTask } from './taskSlice'

export const TaskItem = ({ task }) => {
    const dispatch = useDispatch();
    return (
        <div>
            <input type="checkbox" 
                    onClick={()=>dispatch(doneTask(task))}
                    defaultChecked={task.done} />
            <span>{task.title}</span>
            <button onClick={()=>dispatch(deleteTask(task))}>削除</button>
        </div>
    )
}

• app/features/task/TaskInput.jsというコンポーネントを作成する。このコンポーネントは新規にタスクを登録するコンポーネントにする

import React, { useState } from 'react'
import { useDispatch } from "react-redux"
import { createTask } from "./taskSlice"

export const TaskInput = () => {
    const dispatch = useDispatch()
    const [newTitle, setNewTitle] = useState("")
    const handleTitleChange = (e) => {
        setNewTitle(e.target.value)
    }
    const handleSubmit = (e) => {
        e.preventDefault()
        dispatch(createTask(newTitle))
        setNewTitle("");
    }
    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" 
                  value={newTitle}
                  onChange={handleTitleChange}
                  placeholder="新しいタスクを入力してください"
                />
                <button>追加</button>
            </form>
        </div>
    )
}

実行結果