redux-thunk 에서 throttle 기능 구현하기

문제

 

현재 진행하고 있는 프로젝트에서 find 페이지에 접속하면 서버에서 api 호출후 study 데이터를 3개씩 끊어서 가져오는 무한 스크롤을 구현했었다. redux-thunk로 비동기 관리를 해주었는데 기존 redux-saga를 사용할때 썼었던 throttle 헬퍼 함수를 쓰지 못해 get 요청의 반복 요청의 빈도를 제한하지 못해 스크롤 이벤트에 따라 요청을 무수히 보내버렸다.

 

(throttle을 사용하면 인자값으로 넣어준 시간 만큼 요청이후 지연 시간이 생긴다. 지연 시간 동안의 요청은 무시한다.)

 

해결방법

 

우선 Lodash의 throttle을 적용했다.

_.throttle(func, [wait=0], [options={}])

첫번째 인자에 함수 두번째 인자에 지연시간을 넣었다. 그러나 이렇게 까지만하면 작동하지 않았다.

해결법 부터 말하자면 useMemo 훅에서 _.trottle을 맵핑 했다.

함수 본문은 모든 렌더링에서 호출되므로 _.throttle 함수의 새인스턴스가 계속 생성되어(매번 새로운 thunk새 함수 반환) 기능하지 않았던 것

따라서 useMemo로 두번째 파라미터 deps 배열에 dispatch를 넣어주어 dispatch 될때만 첫번째 인자 함수를 호출하고 내용이 바뀌지 않았다면 연산 값을 재사용해 동일한 인스턴스를 얻을 수 있다.

 

해결