Firestore 고객인 Redux Saga Firebase

개시하다

안녕하세요.최근에 친구랑 개발한 리액트.× Firebase의 웹 응용 프로그램에서 Redux-saga-firebase를 사용했기 때문에 소개하고 싶습니다.나는 레드스-saga-firebase를Firestore 고객이 어떻게 역할을 발휘하는지의 예로 쓸 것이다.

이른바 Redux-Salga Firebase

Redux 응용 프로그램에서는 Firebase와의 교환 등 비동기 처리가 중간부품으로 잘라져 처리됩니다.그 중 하나는 Redux saga로 편리한 프로그램 라이브러리 redux-saga-firebase 가 있어 그곳의 일을 잘 처리할 수 있다.

npm trends(2020년 1/16 현재)보면 이런 느낌이다.많이 쓰는 느낌은 아니지만 업데이트 상황도 새롭고 그만큼 활용되고 있음을 알 수 있다.

어떻게

그럼 레드스-saga-firebase는 실제로 어떻게 사용하나요?여기에는 사용하지 않는 경우보다 문서 취득, 수집 취득, 실시간 업데이트에 착안해 소개한다.
우선 레드스-saga-firebase를 사용할 때의 초기화 등 준비 작업입니다.이후 레드스-saga-firebase를 사용할 때 이rsf를 사용합니다.

// 初期化
const firebaseApp = firebase.initializeApp({ ... })

const rsf = new ReduxSagaFirebase(firebaseApp)

[예1] Firestore 문서 가져오기

Firestore에서 문서 데이터를 가져오는 방법에 대해 설명합니다.

redux-saga-firebase를 사용하지 않을 때

레드스-saga-firebse를 사용하지 않는 상황과 비교하기 위해 먼저 사용하지 않는 상황을 고려해 봅시다.
다음 예에서Firestore의 데이터가 배열에 따라 되돌아오는 처리를 가정합니다..where()를 사용하여 조건에 맞는 모든 문서를 조회하고 .get()를 통해 결과를 얻습니다.이 예에서 사용자 ID는 문서 데이터를 가져오는 데 사용됩니다.

db.collection("hogehoge").where("uid", "==", uid)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            let sample = []
            sample.push(doc.data())
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

또한 상기 문법에서 여기에 참조 배열sample 처리가 존재하면 모든 문서를 배열sample에 추가하기 전의 상태를 참조하는 동기화 처리가 된다.그 대책으로 사용sync/await하지만, 여기서는 레드스-saga-firebase를 잠시 논의합시다.

redux-saga-firebase를 사용할 때

redux-saga-firebase 사용 상황..getDocument hoghoge 컬렉션에서 특정 문서를 가져옵니다.같은 처리 부분만 보면 레드스-saga-firebase를 사용하면 한 줄의 코드를 사용하면 돼요. 유창하고 가독성이 높아요.이처럼 문서의 배열로 데이터를 얻을 때도 번거로운 배열 조작 등이 필요 없고, 동시 작성이 가능하기 때문에 호출지옥에 빠지지 않는다.
sagas/hogehoge.ts

    // firestoreの'hogehoge'というコレクションからuidで絞ったドキュメントのデータを取得する
    const doc = yield call(rsf.firestore.getDocument, 'hogehoge/'.concat(uid))

【사용예2】수집 획득에 관하여

모음집 가져오기에 대한 방법.getCollection을 사용합니다.여기에 hoges의 배열을 준비해서 각각 보관하고 있습니다.
sagas/hoghoge.ts

    // hogehogeコレクションを取得
    const snapshot = yield call( rsf.firestore.getCollection,'hogehoge')
    // 配列を用意して格納
    let hoges = []
    snapshot.forEach( hoge => {
      hoges = [...hoges, hoge.data()]
    }

모음 가져오기 및 조건을 제한하는 질의에 대해 설명합니다.

수령 제한 수량: .limit()

예를 들어 모음에서 8개만 얻는 경우는 다음과 같다.

const snapshot = yield call(
  rsf.firestore.getCollection,
  firebase.firestore().collection("hogehoge").limit(8)
);

재배열 후 임의의 수량만 획득: .orderBy().limit()

예를 들어 age 속성에서 정렬(기본값은 승차순)하고 5개만 얻었을 때 다음과 같다.

const snapshot = yield call(
  rsf.firestore.getCollection,
  firebase.firestore().collection("hogehoge").orderBy(`age`).limit("5")
);

이런limit()과orderBy()는 Redux saga Firebase 라이브러리가 아니라 Firebase의 참조(상기와 같이 firebase.firestore()에서 참조)이다.이렇게 하면 Redux saga Firebase 라이브러리를 사용할 수도 있고 Firebase 참조를 동시에 사용할 수도 있다.수집 시 사용할 수 있는 Firebase 참고서여기.에 기재되어 있으니 관심 있는 사람이 찾아보세요.

【사용예3】 실시간 업데이트

Firestore의 실시간 동작을 감지하고 업데이트할 때.channel() 방법을 사용할 수 있습니다.
예를 들어 SNS의 타임라인처럼 실시간으로 업데이트된다.saga 감시 타임라인 업데이트 등 외부 이벤트의 발생을 통해 실시간 업데이트를 진행합니다.
다음은 saga의 설명 예시를 보여 줍니다.전제로 Firestore에는 업데이트 날짜와 시간에 정렬된 문서가 있습니다. timelinersf.firestore.channel()를 통해 수집의 변경을 감지하여 hogehoge라는 변수에 저장한다.마지막으로 Redux가 정의한 액션의 매개 변수로 업데이트를 반영합니다.
saga/timeline.ts

  // timelineというコレクションを更新日時によって並び変えている
  const colRef = db.collection('timeline').orderBy('updatedAt')
  // そのtimelineコレクションの並びに変更があるか監視
  const channel = rsf.firestore.channel(colRef)

  while (true) {
    // 更新を感知してhogehogeに格納
    const hogehoge = yield take(channel)
    // hogehogeをパラメータにactionを呼ぶ
    yield put (action(hogehoge));
  }

실시간으로 업데이트되는 처리는 지루해지기 쉽지만, Redux saga Firebase 프로그램 라이브러리를 사용하면 매우 유창하게 쓸 수 있다고 생각합니다.

끝맺다

이 글은 레드스-saga-firebase를 소개했다.
Redux에서Firestore를 사용할 때 그 비동기 처리를 사가와 Redux-saga-firebase 프로그램 라이브러리에 의뢰하는 것이 어떻습니까?