Adding Features with Redux

Create:

src/components/TaskForm.jsx

import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTask } from '../features/tasks/tasksSlice';

function TaskForm() {
  const [title, setTitle] = useState('');
  const dispatch = useDispatch();

  function handleSubmit(event) {
    event.preventDefault();

    if (!title.trim()) {
      return;
    }

    dispatch(
      addTask({
        id: Date.now(),
        title,
        completed: false
      })
    );

    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={title}
        onChange={(event) => setTitle(event.target.value)}
        placeholder="Enter task title"
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;

Create:

src/components/TaskList.jsx

import { useSelector } from 'react-redux';
import TaskItem from './TaskItem';

function TaskList() {
  const tasks = useSelector((state) => state.tasks.items);

  return (
    <ul>
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}

export default TaskList;

Create:

src/components/TaskItem.jsx

import { useDispatch } from 'react-redux';
import { deleteTask, toggleTask } from '../features/tasks/tasksSlice';

function TaskItem({ task }) {
  const dispatch = useDispatch();

  return (
    <li>
      <span
        style={{
          textDecoration: task.completed ? 'line-through' : 'none'
        }}
      >
        {task.title}
      </span>

      <button onClick={() => dispatch(toggleTask(task.id))}>
        Toggle
      </button>

      <button onClick={() => dispatch(deleteTask(task.id))}>
        Delete
      </button>
    </li>
  );
}

export default TaskItem;

You connected Redux to the UI and implemented core features. You can now create, update, and delete tasks, and all changes go through the store.