[React] 투두 리스트 수정해보기(3)

0. 오늘은 뭐했니?

• 모바일 전용 컴포넌트에 delete,toggle 함수 달아주기
• redux-saga에서 토스트 메시지 관련 오류 수정 방법 생각하기

1. 메시지가 사라지는 문제

하나의 동작을 수행하는 경우에는 별 문제 없이 메시지가 잘 뜬다.

근데 할 일을 연속적으로 추가하거나, 삭제하는 경우에는 토스트 메시지가 기대한 대로 동작하지 않는다.

2. 왜 문제가 발생하나?

export function* addPostSaga({ type, text }) {
  try {
    yield CustomAxios.post("/todo", { content: text });
    const { count, content } = yield CustomAxios.get("/todo");
    yield put({
      type: "ADD_POST_SUCCESS",
      content,
      count,
    });

    yield put({
      type: "SHOW_MESSAGE",
      message: "성공적으로 추가되었습니다",
    });

    yield delay(1000);

    yield put({
      type: "SHOW_MESSAGE",
      message: "",
    });
  }

위 코드는 게시물을 추가 할 때 사용하는 saga인데, 문제가 발생하는 부분은 delay(1000)이후 부분이다.

하나의 동작만 수행하면 별 문제 없이 동작한다.

문제는 연속적으로 동작을 수행할 때다. (노란색이 두 번째 작업)

첫번째 생성메시지를 보내고 나서 1초동안 기다리던 중, 두 번째 작업이 들어오고, 마찬가지로 생성메시지를 보낸다.

이때 두번째 작업이 생성메시지를 보내자마자 첫번째의 DELAY가 모두 끝나 메시지를 삭제하는 경우, 두 번째 생성메시지가 나타나자마자 사라지는 문제가 생긴다.

이 부분은 정말 어떻게 해결해야 할 지 몰라서 여러 곳에 질문을 올려놨는데, 답변을 들으면 다시 고민해봐야겠다.