Redux Saga and Toolkit with Firebase - How to get the data back?

Viewed 415

I am trying to implement Redux Toolkit and Redux Saga with Firebase. Currently I am stuck with the problem of fetching the data from the Firestore. I have configured the store and everything that is needed for the Redux Saga and Toolkit, now the only problem I have is when I try to fetch the data from the Firestore. I have made also the helper functions which can and already did help me, but just without the Redux involved.

This is what I mean by this:

store.js

import createSagaMiddleware from "redux-saga";
import { configureStore } from "@reduxjs/toolkit";
import allQuestionsReducer from "./allQuestionsState";
import allQuestionsSaga from "./redux-saga/allQuestionsSaga";
const saga = createSagaMiddleware();

const store = configureStore({
  reducer: {
    allQuestions: allQuestionsReducer,
  },
  middleware: [saga],
});

saga.run(allQuestionsSaga);

export { store };

AllQuestionsState.js

import { createSlice } from "@reduxjs/toolkit";

export const allQuestionSlice = createSlice({
  name: "allQuestions",
  initialState: {
    allQuestions: [],
    isLoading: false,
    error: null,
  },
  reducers: {
    getAllQuestionsFetch: (state, action) => {
      state.isLoading = true;
    },
    getAllQuestionsSuccess: (state, action) => {
      state.allQuestions = action.payload;
      state.isLoading = false;
    },
    getAllQuestionsError: (state, action) => {
      state.error = action.payload;
      state.isLoading = false;
    },
  },
});

export const {
  getAllQuestionsFetch,
  getAllQuestionsSuccess,
  getAllQuestionsError,
} = allQuestionSlice.actions;

export default allQuestionSlice.reducer;

AllQuestionsSaga.js

import { call, put, takeEvery } from "redux-saga/effects";
import { getQuestions } from "../../utils/firebase-functions/firebase-functions";
import { getAllQuestionsSuccess } from "../allQuestionsState";

function* workGetAllQuestions() {
  const response = yield new Promise(getQuestions);
  yield put(getAllQuestionsSuccess(response));
}

function* allQuestionsSaga() {
  yield takeEvery("allQuestions/getAllQuestionsFetch", workGetAllQuestions);
}

export default allQuestionsSaga;

Helper Function

export const getQuestions = async (formData) => {
  let error;
  try {
    const success = await onSnapshot(collection(firebaseDatabase, "questions"));
    return success.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
  } catch (error) {
    error = error.message;
    return error;
  }
};

Where the action is dispatched

const dispatch = useDispatch();
 const data = useSelector(
   (state) => state.allQuestions.allQuestions
 );

 useEffect(() => {
   dispatch(getAllQuestionsFetch());
 }, []);

 console.log(data);

Does anyone has any clue on how to fix this. I am getting the [] even though I have data in Firestore.

0 Answers
Related