[리액트][리덕스] #3.3 React Redux (To Do List 상세페이지) - 초보자를 위한 리덕스 101

버전에 맞춰서 강의와 다른 코드가 있습니다.

 

결과 화면

---

파일 구조

• src/components/ToDo.js

state의 id값을 이용해서 상세페이지로 보내준다.

import React from 'react'
import { Link } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { deleteToDo } from '../store/store'

function ToDo(props) {
  // ** Hooks
  const dispatch = useDispatch()

  function onDelete(e) {
    e.preventDefault()
    dispatch(deleteToDo(props.id))
  }

  return (
    <li>
      <Link to={`/${props.id}`}>
        <p>{ props.text }</p>
      </Link>
      <button onClick={onDelete}>DEL</button>
    </li>
  )
}

export default ToDo

 

• src/routes/Detail.js

useParams 훅을 사용해서 url의 파라미터값을 가지고 온다.

useSelector를 사용해 state를 가지고 온다.

state의 id값과 파라미터의 id값을 비교해 해당 리스트를 가지고 온다. (파라미터의 타입이 String이기 때문에 Number로 타입을 변환해 값을 비교한다.)

import React from 'react'
import { useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'

function Detail() {
  // ** Hooks
  const param = useParams()

  // ** Redux States
  const toDos = useSelector(state => state)

  const toDo = toDos.find(list => list.id === Number(param.id))

  return (
    <>
      <h1>Detail</h1>

      <p>Created: {toDo.id}</p>
      <p>{toDo.text}</p>
    </>
  )
}

export default Detail