우선 react-redux-firebase의 기본 사용용례는 아래와 같이 실시간 연결성을 기본으로 한다

import { useFirestoreConnect } from "react-redux-firebase";

나의 경우, 문서에 조회수를 추가할 예정이었는데 사람들이 문서 하나를 클릭할 때마다 모든 사람들이 해당 업데이트를 받게된다.

즉 데이터 수정 시, 해당 데이터를 연결받는 모든 실시간 사용자 수만큼 read가 발생 -> 폭발적인 횟수 차감이 발생한다는 문제가 있다

조회수는 손쉽게 늘어나는 데이터인데, 이 때문에 read가 무자비하게 발생한다면...(콰광)

따라서 firestore 를 연결해두는 것이 아닌 1회 조회 후 연결을 끊는 동작이 필요하였고 삽질 끝에 방법을 알아냈다

방법

핵심은 redux-firebase 라이브러리에 있다
https://github.com/prescottprue/redux-firestore
이 라이브러리는 firebase와 redux를 연결시키기 위해 reducer와 action을 자동으로 생성한다.

이는 firestore를 확장, 발전시킨 instance를 만들고 이 store에 추가된 함수

• get
• add
  등의 함수를 이용하면 내가 직접 dispatch하지 않아도 redux 에 데이터가 추가된다. (1회성)

react-redux-firebase 라이브러리에서는 해당 store 인스턴스를 아래 코드를 통해 불러 사용할 수 있다

import { useFirestore } from "react-redux-firebase";

const Home = () => {
  
  const store = useFirestore();
  
  useEffect(() => {
    store.get({
      collection: "schedules",
      where: [
        ["datetime", ">=", start],
        ["datetime", "<", end],
      ],
    });
  }, []);
 
  const shedules = useSelector((state) => state.firestore.data.schedules);

  const orderedShedules = useSelector((state) => state.firestore.ordered.schedules);
  return (<>{Object.keys(schedules)}</>)
}

get이 redux의 값을 변경하면 -> selector가 바로 감지해 리랜더링 -> get 재호출 의 무한 rerendering 이 발생한다...

이를 방지하기 위해 useEffect를 사용했다

포인트

• connection에서 사용할법한 storeAs 키워드는 필요없다.
  schedules 컬렉션의 데이터는 state.firestore.data.schedules 의 키값으로 저장된다.
• state.firestore.ordered.schedules 에는 같은 데이터가 순서가 정렬되어 저장되어 있다
• where 조건문 입력이 가능하다