I am using createAsyncThunk API from Redux Toolkit when fetching notes data from Google Firebase which stores in collection notes

In notebookSlice.js I define the functional thunk and slice

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const firebase = require('firebase');

export const fetchNotes = createAsyncThunk(
  'users/fetchNotes',
  async () => {

    firebase.firestore().collection('notes').get()
      .then((snapshot) => {
        var data = [];
        snapshot.forEach((doc) => {
          data.push({
            title: doc.data().title,
            body: doc.data().body,
            id: doc.id
          })
        });


        console.log(data); // not null
        return data;
      })
      .catch((err) => {
        console.log(err)
      });



  }
)


export const notebookSlice = createSlice({
  name: 'notebook',
  initialState: {
    selectedNoteIndex: null,
    selectedNote: null,
    notes: null,
    count: 3,
    loadingNotes: false,
    error: null
  },
  reducers: {
   ...
  },

  extraReducers: {
    [fetchNotes.pending]: (state, action) => {
      if (state.loadingNotes === false) {
        state.loadingNotes = true

      }

    },
    [fetchNotes.fulfilled]: (state, action) => {
      if (state.loadingNotes === true) {
        state.notes = action.payload;
        console.log(action.payload); // null
        state.loadingNotes = false;

      }

    },
    [fetchNotes.rejected]: (state, action) => {
      if (state.loadingNotes === true) {
        state.loadingNotes = false;
        state.error = action.payload;
      }


    }
  }

And I use them in ponent sidebar.js

import React, {useState, useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchNotes } from './notebookSlice';

export function Sidebar(props) {

  const dispatch = useDispatch();


  useEffect(() => {
    dispatch(fetchNotes());
  })

  return ( 
  ...

  )


}

I am pretty sure that I get plete data from the thunk function but the state.notes remains null after fetching the data with a final fulfilled status. What's wrong with my code?

I am using createAsyncThunk API from Redux Toolkit when fetching notes data from Google Firebase which stores in collection notes

In notebookSlice.js I define the functional thunk and slice

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const firebase = require('firebase');

export const fetchNotes = createAsyncThunk(
  'users/fetchNotes',
  async () => {

    firebase.firestore().collection('notes').get()
      .then((snapshot) => {
        var data = [];
        snapshot.forEach((doc) => {
          data.push({
            title: doc.data().title,
            body: doc.data().body,
            id: doc.id
          })
        });


        console.log(data); // not null
        return data;
      })
      .catch((err) => {
        console.log(err)
      });



  }
)


export const notebookSlice = createSlice({
  name: 'notebook',
  initialState: {
    selectedNoteIndex: null,
    selectedNote: null,
    notes: null,
    count: 3,
    loadingNotes: false,
    error: null
  },
  reducers: {
   ...
  },

  extraReducers: {
    [fetchNotes.pending]: (state, action) => {
      if (state.loadingNotes === false) {
        state.loadingNotes = true

      }

    },
    [fetchNotes.fulfilled]: (state, action) => {
      if (state.loadingNotes === true) {
        state.notes = action.payload;
        console.log(action.payload); // null
        state.loadingNotes = false;

      }

    },
    [fetchNotes.rejected]: (state, action) => {
      if (state.loadingNotes === true) {
        state.loadingNotes = false;
        state.error = action.payload;
      }


    }
  }

And I use them in ponent sidebar.js

import React, {useState, useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchNotes } from './notebookSlice';

export function Sidebar(props) {

  const dispatch = useDispatch();


  useEffect(() => {
    dispatch(fetchNotes());
  })

  return ( 
  ...

  )


}

I am pretty sure that I get plete data from the thunk function but the state.notes remains null after fetching the data with a final fulfilled status. What's wrong with my code?

• javascript
• reactjs
• redux
• promise
• redux-toolkit

1 Answer 1

In fetchNotes, you declare a promise but not returning any value from the function itself, so basically its a javascript issue and not related Redux/React.

export const fetchNotes = createAsyncThunk("users/fetchNotes", async () => {
  // Returns data after resolve
  const data = await firebasePromise();
  return data;
});

Your current code returns a promise, you need to resolve it at some point.

export const fetchNotes = createAsyncThunk("users/fetchNotes", async () => {
  const promise = firebase
    .firestore()
    .collection("notes")
    .get()
    .then((snapshot) => {
      const data = [];
      // assign data
      return data;
    });

  const data = await promise;
  return data;
});

// 

Read more about promises in MDN docs.