리덕스로 버킷리스트 상세페이지에서 삭제하기

기능설명

상세페이지에서 삭제버튼이 있고 삭제버튼을 누르면 그페이지가 지워지고 메인페이지로 가게 한다.

순서

Detail.js에서
1. 삭제버튼 만들기
2.버튼안에 onClick 만들기
3.onClick 안에 뒤로가기 함수 넣기 : navigate(-1)
4.useNavigate 임포트

bucket.js에서
5.액션 타입지정 : const DELETE = "bucket_DELETE"
6.액션 함수 만들기

export function deleteBucket(bucket_index) {
    return{type : DELETE, bucket_index};
}

bucket_index와 bucket_index: bucket_index 같은 의미

7.리듀서에서 case만 만들어놓기

 case "bucket/DELETE": {
     return state;
    }

detail.js에 가서 연결
8.useDispatch 임포트

import {useDispatch} from "react-redux";

9.디스패치 객체 만들기

const dispatch =useDispatch()

10.onClick안에 액션생성함수 디스패치

dispatch(deleteBucket(bucket_index));

11.액션생성함수 임포트

import {deleteBucket} from "./redux/modules/bucket";

Bucket.js에서
12. 리듀서 안의 case에 filter메소드로 삭제한 데이터를 뺀 배열 생성하고 그걸 리스트에 담아서 리턴

 case "bucket/DELETE": {
        const new_bucket_list =state.list.filter((cur, idx)=>{
            console.log(parseInt(action.bucket_index)!== idx, parseInt(action.bucket_index), idx)
        return parseInt(action.bucket_index) !== idx;
        });
        console.log(new_bucket_list)
        return {list : new_bucket_list};
}

콘솔로 action.bucket_index를 찍어보니 문자열로 들어와서 숫자타입으로 바꿔줌

최종 코드

Detail.js최종

import React from "react";
import {useParams} from "react-router-dom";
import {useSelector, useDispatch} from "react-redux";
import {deleteBucket} from "./redux/modules/bucket";
import {useHistory} from "react-router-dom";

function Detail(props){
    const dispatch = useDispatch();
    const history = useHistory();
    const params = useParams();
    const bucket_index = params.index;
    const bucket_list = useSelector((state)=> state.bucket.list);

    return (
        <>
        <h1 >{bucket_list[bucket_index]}</h1>
        <button onClick={() => {
            dispatch(deleteBucket(bucket_index));
            history.goBack();
        }}>삭제하기</button>
        </>
    )
}

export default Detail;

Bucket.js 최종본

// bucket.js

// Actions
const CREATE = "bucket/CREATE";
const DELETE = "bucket/DELETE";

const initialState = {
    list: ["영화관 가기", "매일 책읽기", "수영 배우기", "운동하기"]
};

// Action Creators
export function createBucket(bucket) {
    return{type : CREATE, bucket: bucket};
}

    export function deleteBucket(bucket_index) {
        return{type : DELETE, bucket_index};// bucket_index === bucket_index: bucket_index 같은 의미
    }


// Reducer
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
    // do reducer stuff
    case "bucket/CREATE": {
        const new_bucket_list = [...state.list, action.bucket];
        return {list : new_bucket_list};
    }

    case "bucket/DELETE": {
        const new_bucket_list =state.list.filter((cur, idx)=>{
     	return parseInt(action.bucket_index) !== idx;
        });
        console.log(new_bucket_list)
        return {list : new_bucket_list};
    }
default: return state;
}
}