TIL 20211107 [항해99 53일차]

카드 CRUD 리덕스 실행 오류

오류. 강제로 새로고침을 해야 카드 CRUD 실행한게 적용되서 보임

• 오류가 난 이유
  reducer에서 action.payload 값이 잘못되어 있어 리덕스가 제대로 실행되지 않았고, 새로고침 하면 서버에서 받은 데이터가 보여졌다.

• 해결방안

// 카드 추가하기
// 리덕스 실행이 안 된 코드
 [CREATE_CARD]: (state, action) =>
    produce(state, (draft) => {
        const { cardId } = action.payload;
        console.log(action.payload);
        draft.byId[cardId] = action.payload;
        draft.allIds.unshift(cardId);
    }),

// 리덕스 실행이 된 코드
 [CREATE_CARD]: (state, action) =>
    produce(state, (draft) => {
       const { cardId } = action.payload.card;
        console.log(cardId);
        draft.byId[cardId] = action.payload.card;
        draft.allIds.unshift(cardId);
    }),

// 카드 수정하기
// 리덕스 실행이 안 된 코드
[UPDATE_CARD]: (state, action) =>
      produce(state, (draft) => {
        draft.current = action.payload;
        console.log(action.payload);
        draft.byId[action.payload.id] = action.payload;
     }),
     
// 리덕스 실행이 된 코드     
[UPDATE_CARD]: (state, action) =>
      produce(state, (draft) => {
        draft.current = action.payload;
        console.log(action.payload);
        draft.byId[action.payload.card.cardId] = action.payload.card;
        console.log(action.payload.card.cardId);
    }),

// 카드 삭제하기
// 리덕스 실행이 안 된 코드
  [DELETE_CARD]: (state, action) =>
      produce(state, (draft) => {
        delete draft.byId[action.payload];
        draft.allIds = draft.allIds.filter(
          (id) => id !== Number(action.payload),
        ); 
     }),

// 리덕스 실행이 된 코드  
  [DELETE_CARD]: (state, action) =>
      produce(state, (draft) => {
        delete draft.byId[action.payload.cardId];
          console.log(action.payload.cardId);
          draft.allIds = draft.allIds.filter(
           (id) => id !== Number(action.payload.cardId),
        );
        console.log(draft.allIds);
    }),

실행이 안 된 코드에서 콘솔을 찍어봤을때 값이 제대로 들어오지 않는걸 확인 할 수 있었다.😱
위 사진들을 통해 리덕스가 잘 동작 되서 새로고침 없이 바로 카드 추가, 수정, 삭제가 되는걸 볼 수 있다.

p.s. action creators에서 보낸 파라미터가 reducer에서 action.payload 뒤에 .파라미터명으로 붙는다!

---

리덕스가 history.push()로 이동이 안되서 일단 window.location.replace(); 방식으로 그동안 했었는데.. 이 방식은 그전에 해놨던게 전부 제대로 동작이 안되서 여태 새로고침으로 서버에서 데이터를 가져왔던것...!😱😭 콘솔창 확인했을때 action이 돌아가길래 당연히 해당 action이 잘 수행되는줄 알고 크게 신경 안썼었는데... 마이페이지 리스트 불러오는 action만 실행되고 있었다.
이번일로 콘솔을 정말 잘 찍고 값을 제대로 넣어줘야 하는것이 중요하다는 걸 느꼈다. 콘솔 찍는걸 생활하 하기!!!