[초보자를 위한 리덕스 101] #3.4 Deleting To Do ~ #3.6 Conclusions

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다.

 

#3.4 Deleting To Do

 

이제 ToDO.js에서 코드를 작성해보자.

import React from "react";
import { connect } from "react-redux";
import { actionCreators } from "../store";

function ToDo({ text, onBtnClick }) {
    return (
      <li>
        {text} <button onClick={onBtnClick}>DEL</button>
      </li>
    );
  }
 
 
  export default connect(null, mapDispatchToProps)(ToDo);

삭제하는 버튼을 작성한다. home에서 이렇게 작성한 것을 Todo.map(toDo=>로 매칭시킨다.

<ul>
         {toDos.map(toDo => (
           <ToDo {...toDo} key={toDo.id} />
         ))}
       </ul>

키 값을 주어 에러를 방지했다.

우리는 리스트를 삭제하기 위해 id를 부여했었다. ToDo를 지우기 위해 id가 필요하다.  이제 store.js로 가서 아래 부분을 바꾸어준다.

const deleteToDo = id => {
    return {
        type: DELETE,
        id
    };
};




const deleteToDo = id => {
    return {
        type: DELETE,
        id: parseInt(id)
    };
};

dispatch에 접근하기 위해 dispatch만 신경쓴다. state에 대해서는 신경쓰지 않는다. 따라서 ㅅToDo에서 mapdispatchToProps()를 통해  전달해야한다.

function mapDispatchToProps(dispatch, ownProps) {
    return {
      onBtnClick: () => dispatch(actionCreators.deleteToDo(ownProps.id))
    };
  }

버튼을 누르면 state로 올라간 text를 가져와야한다. addToDo()를 호출한다. 그러나 여기서는 이미 ownProps에 id를 가지고 있기 때문에 코드를 위와같이 작성했다.

 

 

#3.5 Detail Screen

Detail.js를 routes에 생성하고 코드를 작성해보자.

ToDo에 링크를 걸어 Detail로 이동하도록 해본다.

<ToDo.js>

import React from "react";
import { connect } from "react-redux";
import { actionCreators } from "../store";
import { Link } from "react-router-dom";

function ToDo({ text, onBtnClick, id }) {
    return (
      <li>
        <Link to={`/${id}`}>
         {text} <button onClick={onBtnClick}>DEL</button>
       </Link>
      </li>
    );
  }
 
  function mapDispatchToProps(dispatch, ownProps) {
    return {
      onBtnClick: () => dispatch(actionCreators.deleteToDo(ownProps.id))
    };
  }
 
  export default connect(null, mapDispatchToProps)(ToDo);

이제 클릭하면 해당 디테일 부분으로 이동하는 것을 잘 볼 수 있다.

Detail.js에서

import React from "react";
import {useParams} from "react-router-dom"

 function Detail({ toDo }) {
   const id=useParams();
   console.log(id);
   return <h1>Detail</h1>;
 }
 export default Detail;

여기서 문제는 우리가 이렇게 mapStateToProps로 저장할 수 있지만 state로부터 가져온 id를 이용해서 저장할 수 있다.

하지만 ownProps로 저장하는 방법도 있다. 

import React from "react";
import { connect } from "react-redux";

function Detail({ toDo }) {
    return (
    <>
        <h1>{toDo?.text}</h1>
        <h5>Created at: {toDo?.id}</h5>
    </>
    );
}

function mapStateToProps(state, ownProps) {
    const {
        match: {
            params: { id }
        }
    } = ownProps;
    return { toDo: state.find(toDo => toDo.id === parseInt(id)) };
}

export default connect(mapStateToProps)(Detail);

find 메소드는 testing 함수를 만족하는 첫번째 요소를 반환한다. 여기서는 id와 같은 id를 가지는 toDo를 반환한다.