search

guymoon / hello-waterski

⚛️ 수상스키에 관련된 서비스를 제공합니다.
0 stars 0 forks source link

[redux-migration] spot 부분 #65

Open guymoon opened 2 years ago

guymoon commented 2 years ago

상위 spots 보여주는 작업

기존 방법

기존에는 spot 전체 데이터를 받아와 like 순으로 정렬시켜주고, 앞에 3개만 잘라서 state로 등록해 사용했다. 

 setTopSpots(spots => [...spots].sort((a, .........정렬관련코드);

수정 방법

selector 부분에서 전체 spot 데이터를 이용해 가공. 

  const selfSelector = (state) => (state[SPOT]);
  const spotSelector = createSelector(selfSelector, (state) => state.spot)
  const spotsSelector = createSelector(spotSelector, (state) => state.data.spots);

  const topSpotsSelector = createSelector(spotsSelector,
    (spots) => [...spots]
    .sort((a, b) => b.like - a.like)
    .slice(0, 3)
  );
guymoon commented 2 years ago

공식문서에서 사용하는 방법 https://redux.js.org/usage/deriving-data-selectors#writing-memoized-selectors-with-reselect