내일 배움 캠프 4기 TIL(22.12.15)

투두리스트

//reducer

 case COMPLETE_STATE:
            return{
                ...state,
                Lists:state.Lists.map((list)=>{
                    if(list.id === action.payload){
                        return {
                            ...list,
                            complete:!list.complete,
                        }
                    }else {
                        return list
                    }
                })
            }

//action 

export const completeState = (payload) =>{
    return{
        type:COMPLETE_STATE,
        payload,
    }
}

 const completeHandler =(id)=>{
        dispatch(completeState(id))
    }

<button onClick={()=>{completeHandler(list.id)}}>{list.complete ? '취소':'완료'}</button>

action reducer를 만들어서 completeHandler 함수 만들어서 버튼에 onclick 안에 해당하는 id 값 넘겨주면 된다.

해야할것

• css-component
• 상세 페이지
• component dom