2024.02.06 TIL

 

redux로 투두리스트 만들기 타임어택

redux 개념자체는 알겠는데, 그것보다 객체배열, 구조분해할당 다루는게 더 어렵다..;;

그래서 지웠다 써보고 하면서 연습하면서 이해하려고 노력했다.

리듀서 case를 작성할 때 받아올 payload를 미리 생각해서 주석으로 써놓고 하니까 좋은 것 같다.

return할 때도 객체랑 구조분해할당 때문에 문법오류가 자꾸 났는데, return문에서 값을 조작하려고 하지말고

변수에 할당해서 return하니까 알아보기도 쉽고 문법도 잘 이해되는 것 같다.

저번 redux 타임어택할때 보다 늘긴한 것 같으니 괜찮아

// 리듀서
const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      // payload = 추가할 새 할일
      return {
        ...state,
        todo: [...state.todo, action.payload],
        //좌변의 todo는 state의 하위 속성이므로 state를 붙일 필요가 없다.(구조분해할당)
        // state를 풀어헤치고, 그 안의 todo라는 속성을 변경하겠다.
      };

    case DELETE_TODO:
      //payload = 삭제할 할일의 id값
      const deleteTargetId = action.payload;
      const deletedTodos = state.todo.filter(
        (item) => item.id !== deleteTargetId
      );
      return { ...state, todo: deletedTodos };

    case SWITCH_TODO:
      //payload = 상태를 변경할 id값
      const switchTargetId = action.payload;
      const switchedTodos = state.todo.map((item) => {
        if (item.id === switchTargetId) {
          return { ...item, isDone: !item.isDone };
        } else return item;
      });

      return { ...state, todo: switchedTodos };

    default:
      return state;
  }
};