title: Redux Saga and Toolkit with Firebase - How to get the data back?
body: <p>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 <code>Firestore</code>. I have configured the store and everything that is needed for the <code>Redux Saga</code> and <code>Toolkit</code>, now the only problem I have is when I try to fetch the data from the <code>Firestore</code>. I have made also the helper functions which can and already did help me, but just without the <code>Redux</code> involved.</p>
  <p>This is what I mean by this:</p>
  <h3>store.js</h3>
  <pre><code>import createSagaMiddleware from &quot;redux-saga&quot;;
  import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import allQuestionsReducer from &quot;./allQuestionsState&quot;;
  import allQuestionsSaga from &quot;./redux-saga/allQuestionsSaga&quot;;
  const saga = createSagaMiddleware();
  
  const store = configureStore({
    reducer: {
      allQuestions: allQuestionsReducer,
    },
    middleware: [saga],
  });
  
  saga.run(allQuestionsSaga);
  
  export { store };
  </code></pre>
  <h3>AllQuestionsState.js</h3>
  <pre><code>import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  export const allQuestionSlice = createSlice({
    name: &quot;allQuestions&quot;,
    initialState: {
      allQuestions: [],
      isLoading: false,
      error: null,
    },
    reducers: {
      getAllQuestionsFetch: (state, action) =&gt; {
        state.isLoading = true;
      },
      getAllQuestionsSuccess: (state, action) =&gt; {
        state.allQuestions = action.payload;
        state.isLoading = false;
      },
      getAllQuestionsError: (state, action) =&gt; {
        state.error = action.payload;
        state.isLoading = false;
      },
    },
  });
  
  export const {
    getAllQuestionsFetch,
    getAllQuestionsSuccess,
    getAllQuestionsError,
  } = allQuestionSlice.actions;
  
  export default allQuestionSlice.reducer;
  </code></pre>
  <h3>AllQuestionsSaga.js</h3>
  <pre><code>import { call, put, takeEvery } from &quot;redux-saga/effects&quot;;
  import { getQuestions } from &quot;../../utils/firebase-functions/firebase-functions&quot;;
  import { getAllQuestionsSuccess } from &quot;../allQuestionsState&quot;;
  
  function* workGetAllQuestions() {
    const response = yield new Promise(getQuestions);
    yield put(getAllQuestionsSuccess(response));
  }
  
  function* allQuestionsSaga() {
    yield takeEvery(&quot;allQuestions/getAllQuestionsFetch&quot;, workGetAllQuestions);
  }
  
  export default allQuestionsSaga;
  </code></pre>
  <h3>Helper Function</h3>
  <pre><code>export const getQuestions = async (formData) =&gt; {
    let error;
    try {
      const success = await onSnapshot(collection(firebaseDatabase, &quot;questions&quot;));
      return success.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id }));
    } catch (error) {
      error = error.message;
      return error;
    }
  };
  </code></pre>
  <h3>Where the action is dispatched</h3>
  <pre><code>const dispatch = useDispatch();
   const data = useSelector(
     (state) =&gt; state.allQuestions.allQuestions
   );
  
   useEffect(() =&gt; {
     dispatch(getAllQuestionsFetch());
   }, []);
  
   console.log(data);
  </code></pre>
  <p>Does anyone has any clue on how to fix this. I am getting the <code>[]</code> even though I have data in Firestore.</p>