Unable to fetch the data from firebase child using React Redux-Saga?

I am unable to fetch firebase child data with React and Redux-Saga. Can you please check the below code ? Why it is not working with 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]);
}

When I tried with redux-thunk then I was able to fetch the data from firebase with the below approach

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));
}
});
};
};

I am unable to fetch firebase child data with React and Redux-Saga. Can you please check the below code ? Why it is not working with 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]);
}
When I tried with redux-thunk then I was able to fetch the data from firebase with the below approach

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));
}
});
};
};
So, what is going wrong with redux-saga approach ? I wanted to replicate the same thing with redux-saga.

I think i am missing some small thing here, which is might be very basic. Let me know if have some solution.

I tried the below approach as well.

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));
}
}

Also in #JavaScript _↴