javascript - 无法使用 React Redux-Saga 从 firebase child 获取数据？

Question

我无法使用 React 和 Redux-Saga 获取 firebase 子数据。你能检查下面的代码吗？为什么它不适用于 redux-saga。

import { takeLatest, put, call, fork, all, take } from "redux-saga/effects";
import { getContactsSuccess, getContactsFail } from "./actions";
import * as types from "./actionTypes";
import firebaseDb from "../firebase";

export function* onGetContactsStartSync() {
  try {
    const snapshot = yield firebaseDb.child("contacts").on("value");

    yield put(getContactsSuccess(snapshot.val()));
    console.log("snapshot", snapshot);
  } catch (error) {
    yield put(getContactsFail(error));
  }
}

export function* onLoadContacts() {
  yield takeLatest(types.GET_CONTACTS_START, onGetContactsStartSync);
}

const contactSagas = [fork(onLoadContacts)];

export default function* rootSaga() {
  yield all([...contactSagas]);
}

当我尝试使用 redux-thunk 时，我能够使用以下方法从 firebase 获取数据

export const getContacts = () => {
  return function (dispatch) {
    dispatch(getContactsStart());
    firebaseDb.child("contacts").on("value", (snapshot) => {
      try {
        if (snapshot.val() !== null) {
          dispatch(getContactsSuccess(snapshot.val()));
        } else {
          dispatch(getContactsSuccess({}));
        }
      } catch (error) {
        dispatch(getContactsFail(error));
      }
    });
  };
};

那么，redux-saga 方法出了什么问题？我想用 redux-saga 复制同样的东西。

我想我在这里遗漏了一些小东西，这可能是非常基本的。让我知道是否有一些解决方案。

我也尝试了以下方法。

function createContactChannel() {
  const listener = eventChannel((emit) => {
    firebaseDb.child("contacts").on("value", (data) => {
      if (data.val() !== null) {
        emit(data.val());
      }
    });
    return () => firebaseDb.child("contacts").off(listener);
  });

  console.log("listener", listener);
  return listener;
}

export function* onGetContactsStartSync() {
  try {
    const contacts = createContactChannel();

    yield put(getContactsSuccess(contacts));

  } catch (error) {
    yield put(getContactsFail(error));
  }
}

标签： javascriptreactjsredux-sagaredux-thunk