将firebase与redux-sagas连接的正确方法是啥？

Posted 2023-02-19

【中文标题】将firebase与redux-sagas连接的正确方法是啥？

【英文标题】：What is the proper way of connecting firebase with redux-sagas?将firebase与redux-sagas连接的正确方法是什么？

【发布时间】：2018-11-13 02:28:44

【问题描述】：

我正在构建 react-native 应用程序，我在其中使用 react-native-firebase 和 redux-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（可测试的）的模式吗？

【参考方案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 错误