[항해99 67일차] 2022.05.11 TIL (무한스크롤 구현)



무한스크롤의 늪...

 

무한스크롤 구현 중 draft list에 payload에 있는 list들을 push하다보니

이전 페이지에 들어갔다가 다시 뒤로갔다가 다른 리스트 페이지로 들어갔을 시 이전의 리스트들이 똑같이 불러와지는 문제 발생했었다..

 

현재는 해결이 되었다.!!!

 

수정 전 코드

//액션생성함수
const getSOList = createAction(GET_SEARCH_OFFICE_LIST, (list,page) => ({
  list,page
}));

//미들웨어
const getSOListDB = (keyword,pageno) => {
  console.log("keyword : ", keyword);
  return (dispatch,getState) => {

    instance
      // .get(`/api/list/search/${officeList}?query=${keyword}`)
      .get(`/api/list/search/${pageno}?query=${keyword}`)
      .then((res) => {
        console.log("res : ", res);
        dispatch(getSOList(res.data.estateResponseDtoList,res.data.totalpage));
      })
      .catch((err) => {
        console.log("Error Message: ", err.message);
      });
  };
};
//리듀서 부분
[GET_SEARCH_OFFICE_LIST]: (state, action) =>
      produce(state, (draft) => {
        draft.list.unshift(...action.payload.list);
        draft.page = action.payload.page;
        
      }),

수정 후 코드

//액션 생성 함수

const getSOList = createAction(GET_SEARCH_OFFICE_LIST, (list,page,keyword) => ({
  list,page,keyword
}));


//미들웨이 부분

const getSOListDB = (keyword,pageno) => {
  //console.log("keyword : ", keyword);
  return (dispatch,getState) => {

    instance
      // .get(`/api/list/search/${officeList}?query=${keyword}`)
      .get(`/api/list/search/${pageno}?query=${keyword}`)
      .then((res) => {
        console.log("res : ", res);
        const key=decodeURI(keyword)
        dispatch(getSOList(res.data.estateResponseDtoList,res.data.totalpage,key));
      })
      .catch((err) => {
        console.log("Error Message: ", err.message);
      });
  };
};


//리듀서 부분
[GET_SEARCH_OFFICE_LIST]: (state, action) =>
      produce(state, (draft) => {
        if (action.payload.page > 1 && action.payload.keyword===draft.keyword) {
          draft.list.unshift(...action.payload.list);
        } else {
          draft.list = action.payload.list;
        }
        draft.page = action.payload.page;
        draft.keyword = action.payload.keyword;
        
      }),

리듀서 부분에 조건을 두개 더 추가해주니까 잘 수정되었다.

키워드를 같이 리덕스에 저장시킨다음

payload키워드와 state의 키워드가 같은 경우와 총page가 1 이상인 경우에만 

현재 state list에다가 추가되는 list들을 끼워 넣어줌으로 해결했다.

 

이거 생각하기 까지 너무 막막하고 오래걸렸다.ㅠㅠ

reduce사용하고...filter도 사용하는 난리를 직였다 !!!