버킷리스트 완료버튼 만들기

Detail.js에서
1.완료버튼 만든다.
Bucket.js에서
2.initialState 바꿔주기

const initialState = {
    list: [
        { text : "영화관 가기", completed: false },
        { text : "매일 책읽기", completed: false },
        { text : "수영 배우기", completed: false },
        { text : "코딩하기", completed: false }
]
};

3.list가 딕셔너리 형태로 바꼈으므로
bucketlist.js에서 불러오는 값도 바꿔주기

{list}->{list.text}

detail.js에서 불러오는 값 바꾸기

{bucket_list[bucket_index]}->
{bucket_list[bucket_index].text}

bucket.js에서 넣어주는 값도 바꾸기

case "bucket/CREATE": {
        const new_bucket_list = [...state.list, {text: action.bucket, completed: false}];
        return {list : new_bucket_list};
    }

bucket.js에서
4.액션 타입 지정

const UPDATE = "bucket/UPDATE";

5.액션함수 만들기

export function updateBucket(bucket_index) {
    return{type : UPDATE, bucket_index};
}

6.리듀서에 case만 만들어놓고 확인해보기

   case "bucket/UPDATE": {
        console.log("이제 완료할거야")
            return state;
    }

Detail.js에서
7.액션함수 임포트 :

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

8.버튼의 onClick에 액션 함수 넣기

		<button onClick={() => {
            dispatch(updateBucket(bucket_index));
        }}>완료하기</button>

9.리듀서 case 안 내용 추가

    case "bucket/UPDATE": {
        const new_bucket_list = state.list.map((cur, idx) => {
           if(parseInt(action.bucket_index) === idx){
            return{...cur, completed: true};
            }else{
                return cur;
            }
        })
        return {list: new_bucket_list}
    }

10.완료된 버킷 배경 색 바꾸기
BucketList.js에서 completed 속성 추가
styled component에 조건 추가

<ItemStyle  completed={list.completed} className="list_item" key={index} onClick={()=>{
        history.push("/detail/"+index);
    }}>
{list.text}
</ItemStyle>
...
const ItemStyle = styled.div`
padding: 16px;
margin: 8px;
background-color: ${(props)=>(props.completed ? "orange":"aliceblue")};
`;