3주차 - (퀴즈) 버킷리스트 데이터를 삭제 해보자

퀴즈설명 - 상세페이지에서 삭제 버튼을 두고, 항목을 삭제 해보자

 

👻 힌트:

1. 조건에 맞춰 배열 항목을 필터링 해주는 array의 내장함수 filter를 사용합니다.
   (filter가 뭔지 모르신다면 검색해서 해보세요!)
   → url 파라미터가 배열의 index이니, 그것만 빼고 나머지를 새로운 배열에 넣어주면 되겠네요!
2. 액션, 액션 생성 함수, 리듀서에 삭제에 관한 내용을 넣어줘야겠죠?
   → create를 참고해서 delete를 만들어보세요!
3. Detail.js에 제가 useDispatch() 사용법을 주석 처리 해두었습니다 :) 주석을 참고해보세요!

과정:

   1. 액션, 액션 생성 함수, 리듀서에 삭제 관련 내용을 만들어 준다.

// bucket.js

// Actions
// 액션의 타입을 정해주는 곳
const CREATE = 'bucket/CREATE'; // 추가하기 기능
        // 프로젝트명/모듈명(리듀서명)/액션명
const DELETE = 'bucket/DELETE';

const initialState = { // 초기값 설정
    list : ["영화관 가기", "매일 책읽기", "수영 배우기"]
}

// Action Creators (액션 생성 함수)
// 액션 타입에 대한 액션 객체를 만드는 곳
export function createBucket(bucket){ // CREATE Action에 대한 액션 객체
    
    return {
        type : CREATE,
        bucket
        // bucket : bucket -> bucket
        // key, value가 똑같으면 생략 가능(자바스크립만)

        // 액션 객체를 return 해준다.
    };
}

export function deleteBucket(bucket){ // DELETE Action에 대한 액션 객체
    
    return {
        type : DELETE,
        bucket
    };
}

// reducer
export default function reducer(state = initialState, action = {}) {
                                // state = {} -> 기본값(초깃값)을 준다.
    switch (action.type) {
        case 'bucket/CREATE': {
            console.log("이제 값을 바꿀꺼야");
            const new_bucket_list = [...state.list, action.bucket];
            return {list : new_bucket_list};
        }

        case 'bucket/DELETE': {
            console.log("이제 값을 삭제 할꺼야!");
            const new_bucket_list = state.list.filter((data, index)=>{
            // state는 딕셔너리 형태이고 state 안에 list가 배열 형태로 있기 때문에
                return index != action.bucket
            })
            return {list : new_bucket_list};
        }

        // do reducer stuff
        default:
            return state;
    }
}

// -> 버킷 모듈 하나를 만든 것이다.
// -> 이 모듈 안에 있는 리듀서를 묶어서 스토어를 만든다.
// -> 스토어를 만들고 컴포넌트가 구독하도록 해야 한다.

   2. Detail.js에 삭제하기 버튼을 만든다.

   3. history.goback()을 사용해서 뒤로 가게 한다.

// 리액트 패키지를 불러옵니다.
import React from "react";
import { useParams, useHistory } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { deleteBucket } from './redux/modules/bucket'

const Detail = (props) => {

  const params = useParams(); // -> 딕셔너리 형태
  console.log(params)
  const bucketIndex = params.index
  const bucketList = useSelector((state) => state.bucket.list)
  const dispatch = useDispatch();
  const history = useHistory();

  const deleteBucketList = ()=>{

    console.log("액션을 생성 할꺼야")
    dispatch(deleteBucket(bucketIndex));
    history.goBack(); // 삭제 후에는 뒤로 가기를 해서 버킷리스트 목록을 보여준다.
  }

  return (
    <div>
      <h1>{bucketList[bucketIndex]}</h1>
      <button onClick={deleteBucketList}>삭제하기</button>
    </div>
  )
};

export default Detail;