【问题标题】:What is the proper way of connecting firebase with redux-sagas?将firebase与redux-sagas连接的正确方法是什么?
【发布时间】:2018-11-13 02:28:44
【问题描述】:

我正在构建 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(可测试的)的模式吗?

【问题讨论】:

    标签: firebase react-native redux redux-saga


    【解决方案1】:

    使用 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))
      }
    }
    

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

    您还可以使用 redux-saga-firebase 之类的库来自动化这部分,只需使用:

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

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

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

    【讨论】:

    • 我有一个大数据及其停止视图,直到减速器没有设置所有数据。有什么办法可以避免这个问题?
    • @n6g7 在使用 react-native-firebase 时如何初始化 redux-saga-firebase?我查看了 redux-saga-firebase 文档,但我没有在我的 JS 代码中初始化 firebase,因为它是在本机代码中完成的。
    • @bzlight 看起来 react-native-firebase 导出了一个 firebase 实例(import firebase from 'react-native-firebase';,参见rnfirebase.io/docs/v5.x.x/installation/…),因此您可以使用new ReduxSagaFirebase(firebase) 之类的东西创建一个 rsf 实例。我从来没有真正这样做过,但听起来它应该可以工作。告诉我!
    • 完美,我就是这么想的,所以我已经编码了!我今天正在测试它,我会告诉你进展如何
    • @bzlight 你用那个解决方案成功了吗?我目前像 API 一样手动使用 react-native-firebase,但使用 yield call(firebase.firestore().collection('users').doc('userId').get) 会导致 cannot read property _customUrlOrRegion of undefined at nativeModuleKey 错误
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-15
    • 2011-03-21
    相关资源
    最近更新 更多