React.js
Pocket

React、Redux、Saga、Firebaseとかで試しに作ってるものがあるんですが、Sagaをそのまま使うとFirebaseのリアルタイム更新のAPIを使わずに書いてしまい、リアルタイム更新しなくしてしまいました。Firebase使ってるのに。

そこでSaga使いつついい感じにできないかと調べてたらeventChannelというものが用意されてるので、それを使えばいいとのことでした。

Sagaは何かしらアクションが発生するのを管理してくれますが、FirebaseみたいにSagaの管理外のアクション発生を検知してくれるのがeventChannelらしいです。

ざっくりコードでログイン部分を作っていたのですが、

import { put, call, take } from 'redux-saga/effects'
import { eventChannel } from 'redux-saga'

function authChannel() {
  const auth = firebase.auth()
  const channel = eventChannel(emit => {
    const unsubscribe = auth.onAuthStateChanged(
      user => emit({ user }),
      error => emit({ error })
    )
    return unsubscribe
  })
  return channel
}

export default function* rootSaga() {
  const channel = yield call(authChannel)
  while (true) {
    const { user } = yield take(channel)

    if (user) {
      yield put(authAction.loginSucceeded(user))
    }
  }
}

eventChannel内にFirebaseの記述を書くことでsagaと繋げることができます。

まだ、触りたてで理解できてないところもありますが、これでSagaを使いつつFirebaseのいいところも活かしていけそうです。

参考サイト

Firebase Realtime DatabaseをRedux-Sagaでリアルタイムに更新する

Pocket

Tag :