TIL : Redux todolist 오류 ( 2 )

reducer 오류

오류내용 : reducer를 생성했는데, delete기능과 toggle기능을 실행하는 버튼을 눌렀을 때, 삭제와, 토글기능이 일어나는 것이 아닌, 모든 list가 삭제되는 오류가 생겼다.

Delete

오류가 났던 수정 전 코드

case DELETE_TODO:
      console.log(action);
      return [state.filter((todo) => todo.id !== action.payload)];

튜터님 코드보고 수정한 코드
⇩⇩⇩⇩⇩⇩⇩

    case DELETE_TODO:
      console.log(action);
      return state.filter((todo) => todo.id !== action.payload);

toggle

오류가 났던 수정 전 코드

case TOGGLE_TODO:
      return [ state.map((todo) => {
        if (todo.id === !action.payload) {
          return {
            ...todo,
            isDone: !todo.isDone,
          };
        } else {
          return todo;
        }
      })
     ];

튜터님 코드보고 수정힌 코드
⇩⇩⇩⇩⇩⇩⇩

case TOGGLE_TODO:
      return state.map((todo) => {
        if (todo.id === action.payload) {
          return {
            ...todo,
            isDone: !todo.isDone,
          };
        } else {
          return todo;
        }
      });

filter된 내용과, map메스드를 이용하여 반환할 때, return내용을 배열로 감싸서 반환하려고 했던 게 문제였다. 두 경우 모두 같은 문제로, return 부분에서 배열로 감싸지 않도록 [ ] 를 삭제했더니 모든 리스트가 삭제되는 오류가 고쳐졌다.

redux과제를 하다가 위의 경우로 인하여 과제를 완성하지 못한채로 제출해서 아쉬운 마음이 들었다. 괄호때문에 계속 오류가 나는 거였다니... 생각해보면 filter나 map이나 다 배열인데, 생각이 짧았던 것 같다. redux에서 state를 사용하는 게 미숙한 탓도 있겠지만, filter랑 map에 아직 익숙치 않은 게 문제라고 생각이 든다. .filter랑 .map 사용하는 연습이 더 필요할 것 같고, redux도 투두리스트 계속 만들어보면서 익숙해질 필요가 있을 것 같다.