오랜만에 TIL... 다른 문서잡업을 하느라 여기에 집중을 못했지만 이제 다시 또 달립니다~~🏃🏻‍♂️

redux-saga 맛보기 🤔

• 먼저 redux-saga의 effects 유틸 함수들의 특징부터 알아보겠습니다.
  • delay : 시간을 설정하여 그 시간 만큼 기다린 후 실행
  • put : 액션을 디스패치
  • takeEvery : 특정 액션 타입에 대하여 디스패치되는 모든 액션들을 처리
  • takeLatest : 특정 액션 타입에 대하여 디스패치된 가장 마지막 액션만을 처리
  • call : 특정 함수를 호출하고, 결과물이 반환 될 때까지 기다림
  • all : 배열 안의 여러 사가를 동시에 실행시켜 줌
  • select : 현재 store 의 상태를 확인할 수 있다.

redux-saga

• 대부분의 상황에선 redux-thunk 로 충분
• 하지만 밑에 상황에서는 redux-saga로 구현하는 것이 유리
  • 기존 요청을 취소 처리해야 할 때 (불필요한 중복 요청 방지)
  • 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때
  • 웹소켓을 사용할 때
  • API 요청 실패 시 재요청을 해야 할 때

제너레이터 함수 이해

• 이 문법의 핵심 기능 -> 함수를 작성할 때 함수를 특정 구간에 멈춰 놓을 수 도 있고, 원할 때 다시 돌아가게 할 수도 있다.
• 제너레이터 함수의 작동 방식만 기본적으로 파악하고 있으면, redux-saga에서 제공하는 여러 유틸 함수를 사용하여 액션을 쉽게 처리할 수 있다.

비동기 카운터 만들기

• 제터레이터 함수를 saga 라고 부른다.
  • takeEvery 는 들어오는 모든 액션에 대해 특정 작업을 처리 해준다.
  • takeLatest 는 기존에 진행 중이던 작업이 있다면 취소하고, 가장 마지막 작업만 수행
• 루트 사가를 만들어야 한다.
• redux-saga 를 store에 연결
  
• redux-devtools 를 활용하여 액션들의 상태 확인하기

API 요청 상태 관리

• 기존 thunk의 코드를 지우고 액션 생성함수를 만들고 saga를 만든다.
• saga를 다 만들고 rootSaga 에 등록한다.

리팩토링

• thunk 와 마찬가지로 saga 쪽에 중복되는 코드를 유틸함수로 만든다.
• 일단 기본 구조에 익숙해 지면 리팩토링을 해야겠다...