출처: https://academy.nomadcoders.co/courses/enrolled/235420

Nomade coder redux 강의

(React Redux : To Do List 만들기)

2.0 vanilla toDo

2.1 State Mutation

Never mutate state !!!!!!! 기존 state를 변형시키진 말고, (=state 원형을 파괴하지 말아라!! ) 기존 state를 변경해서 새로 만들어라?

const reducer = function(state = [], action) {
    switch(action.type){
        case ADD_TODO:
            return [...state, {text: action.text}];
            /*
    위 같이 Return해주는 이유는 원래 존재했던 Todo목록을 그대로
    불러온 후 추가적으로 ToDo를 추가해준다.
    */  
        case DELETE_TODO:
            return [];
        default:
            return state;
    }
}

2.2 - 2.3 Delete To Do

state mutaion을 피하기 위해서 filter() 를 사용 해서 delete 작업을 하자

const reducer = function(state = [], action) {
    switch(action.type){
        case ADD_TODO:
            return [{ text: action.text, id: Date.now() }, ...state];
        case DELETE_TODO:
            return state.filter(toDo => toDo !== action.id);
        default:
            return state;
    }
}

return state.filter(toDo => toDo.id !== action.id); 전달받은 id값이 아닌 toDo 항목들만 통과시켜서 새로운 배열을 만들어줌 fileter 함수 사용