redux-thunk로 무한스크롤 데이터 중복값 해결

기존에 무한 스크롤시 중복 요청을 보내는 것을 lodash의 throttle로 지연시간을 주어 해결했었다.

그러나 지연시간을 짧게 주었을 경우 0.2~1초 1초 사이에 api를 불러오면 프로그램내에서 처리시간(스터디 데이터 불러와서 마지막 id 체킹)이 지연시간 보다 길다보니 중복 데이터를 불러오는 경우가 생겼었다.

 

처음 생각한 해결 방법은 "편하게 지연시간을 2초로 넉넉히 주자"가 있었지만 그건 좋지 못한 방법이 었고

차분하게 생각해보니 그냥 서버에서 온 값과 기존 데이터를 비교해서 중복이면 추가해주지 않으면 된다는 간단한 생각이 들었다. 그로인해 필요한 건 내 es6 역량이었다.

 

결국엔 두개의 배열 내 객체 id 값 비교

 

 

여기서 payload.contents는 서버로부터 온 값, state.study는 기존에 내 리덕스 store에 갖고 있던 데이터다.

서버로부터 온 값에서 filter 메소드를 쓴다. 여기서 filter는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 변환한다. 따라서 안에 조건이 true 일 경우에는 ex) [{...},{...},{...}]  처럼 값이 들어오고 false 일 경우엔 빈값이 리턴된다.

그 다음 안에 some 메소드 같은 경우엔 배열을 순회하면서 조건을 만족하는 값이 발견되면 그 즉시 순회를 중단한다.

따라서 state.study 안에 study 객체 id 값이 서버로부터 온 payload.contents study 객체 id 값과 같다면 그 즉시 true 값을 리턴한다. 따라서 payload.contents.filter(item=>true) 일 것이고 그렇다면 payload.contents는 서버로부터 온 값 그대로 [{...},{...},{..}] 일 것 이다. 물론 이 값은 중복값.

그래서 결국 filteredItems의 길이가 1보다 작으면 중복값이 없다는 의미 이므로

state.study에 서버로부터 온 값을 넣어주었다.

es6 문법만 잘 알고 있었다면 간단히 해결할 문제였다. 항상 es6 알고리즘 공부도 틈틈히 해야겠다.