[React] RTK 비동기 호출시 에러 (연속된 api 사용시 에러)

유투브 api 를 이용해서 프로젝트를 진행중이였다

동영상 리스트를 조회해오는 api 안에 동영상을 게시한 채널의 id는 있지만 채널img 정보가 없기때문에

동영상리스트 api 를 호출 후 받아온 동영상 id 들로 채널정보 api 를 호출한뒤 

기존 동영상리스트 api data 에 채널 img 정보를 넣어야 했다.

 

초기 랜더링시 한번 실행된다. 

문제는 초기랜더링이후 두번째 검색때부터 발생한다

 

호출부

getVideoSearch 라는 이름의 동영상리스트 api 를 호출하고

받아온 response 로 채널의 정보를 가져오는 api 를 호출한다

(unwrap()을 사용하면 redux 의 리턴값을 받을수있다)

 

 

동영상 list 를 받아오는 api 이다.

 

동영상 리스트에서 추출해낸 id 를 직렬화시켜서

채널 정보를 받아온다.

 

slice 의 extraReducers 부분인데 이상하게 

동영상list payload 만 state 에 값을 저장하려고하면 에러가 났다..

 

알고보니 채널정보를 가져오는 Thunk 부분에서 

기존 state 를 변경하려했기때문이다

리덕스 규칙

1. 상태 값은 불변 객체이다.
2. 상태 값은 순수 함수에 의해서만 변경되어야 한다.

 

호출부에서 동영상리스트를 받아온 api 의 리턴값을 그대로

채널에다 쓰다보니 리턴값의 주소값이 그대로 이어져있던것이였다.

첫 api호출시 이미 state 에 값을 넣었는데

state 에 있는값과 호출부에서 내려준 data 의 주소값이 연결돼어있으니

redux 에서 state 값을 변경하려고 판단해서 에러가 났던것이다

 

해결

lodash 라이브러리를 이용해서 깊은복사를 해줬다

사실 별거아닌 에러였지만

유투브 api 가 일일 10000건의 할당량만 제공하기때문에

테스트하다가 막히고.. 테스트하다가 막히고..해서

시간이 좀 걸렸다..