using redux in a component

index.tsx

import {useAppSelector, useAppDispatch} from "hooks"
import {selectNotes, removeNote} from "slice"

const HomePage = (): JSX.Element => {
  const notes = useAppSelector(selectNotes);
  const dispatch = useAppDispatch();
  
  const deleteNote = (noteId: string) => {
    dispatch(removeNote(noteId))
  }
  
  const renderNotes = notes.map((note) => (
    <div key={note.id}>
      <h1>{note.title}</h1>
      <p>{note.content}</p>
      <button onClick={() => deleteNote(note.id)}>Delete Note</button>
    </div>
  ))
  
  return (
    <div>
      {renderNotes}
    </div>
  )
}

export default HomePage;