首页 > 解决方案 > 将firebase与redux-sagas连接的正确方法是什么?

问题描述

我正在构建 react-native 应用程序,我在其中使用react-native-firebaseredux-saga. 这是我第一个使用 的项目redux-saga,因此我正在学习。到目前为止,我使用以下方法对用户进行了身份验证:

import firebase from 'react-native-firebase';

function* loginEmlPwdSaga(action) {
  try {
    const auth = firebase.auth();
    const data = yield call(
      [auth, auth.signInAndRetrieveDataWithEmailAndPassword],
      action.email,
      action.password,
    );
    yield put(loginSuccess(data));
  } catch (error) {
    yield put(loginFail(error));
  }
}

但是,现在我被困在我想订阅该集合的地方。在react-native-firebase我会使用以下内容:

firebase.firestore().collection('users').onSnapshot(...)

我不确定在redux-saga. 你能告诉我我可以在未来使用 onSnapshots (可测试的)的模式吗?

标签: firebasereact-nativereduxredux-saga

解决方案


使用 redux-saga 订阅 firestore 集合的最简单方法是使用通道:

function * syncUsers () {
  const ref = app.firestore().collection('users')
  const channel = eventChannel(emit => ref.onSnapshot(emit))

  try {
    while (true) {
      const data = yield take(channel)
      yield put(successAction(data))
    }
  } catch (err) {
    yield put(errorAction(err))
  }
}

successAction(data)每次 Firebase 将更改推送到您的客户端时,这将调度一个操作(由 创建)。

您还可以使用像redux-saga-firebase这样的库来自动化这部分,并简单地使用:

function * syncUsers () {
  yield fork(rsf.firestore.syncCollection, 'users', {
    successActionCreator: successAction,
    failureActionCreator: errorAction
  })
}

免责声明:我是redux-saga-firebase的作者。

更新: redux-saga-firebase 不再维护,并且与 Firebase 8 不兼容。


推荐阅读