örnek dosyam

App.jsx

import { useEffect, useState } from 'react';
import TodoList from './components/TodoList'
import { useDispatch, useSelector } from 'react-redux';
import { addTodo } from './redux/todosSlice'
import Form from './components/SubmitForm';

function App() {
  const title = "Yapılacak Listesi";
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos.items)
  const [todo, setTodo] = useState('');

  const handleKey = (e) => {
    if (e.key === 'Enter') {
      dispatch(addTodo({
        id: Math.random().toString(),
        text: todo,
        completed: false
      }));
      setTodo('');
    }
  }

  useEffect(() => {
    document.title = title;
  }, [])

  return (
    <>
      <h1>{title}</h1>
      <input
        type='text'
        placeholder='Notunuzu buraya yazın.'
        onChange={(e) => setTodo(e.target.value)}
        value={todo}
        accessKey='n'
        onKeyDown={handleKey}
      />&nbsp;<input
        type="button"
        value='Ekle'
        onClick={() => {
          dispatch(addTodo({
            id: Math.random().toString(),
            text: todo,
            completed: false
          }));
          setTodo('');
        }}
        disabled={!todo}
        accessKey='e'
      />
      <br />
      <TodoList />
      <hr />
      <Form />
    </>
  )
}

export default App;