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.