0

I'm trying to fetch data from firebase Realtime Database and put it into the store. Fetching data from Firebase has no problem. It works fine.

The problem is that the thunk is fulfilled even before data being fetched.

I first tried the code below but the returned 'result' was undefined because it had been assigned even before the onValue was finished.

export const fetchJournals = createAsyncThunk(
  'journals/fetchJournals',
  (userId) => {
    let result;
    const query = ref(db, `users/${userId}/journals`);
    onValue(query, (snapshot) => {
      result = snapshot.val();
    })
    return result;
  }
);

So I tried another code like below using then but got this error code : Object(...)(...).then is not a function

const initialState = { posts: [], status: 'idle', error: null };

export const fetchJournals = createAsyncThunk(
  'journals/fetchJournals',
  (userId) => {
    let result;
    const query = ref(db, `users/${userId}/journals`);
    onValue(query, (snapshot) => {
      return snapshot.val();
    }).then((res) => (result = res));
    return result;
  }
);

export const journalsSlice = createSlice({
  name: 'journals',
  initialState,
  reducers: {},

  extraReducers(builder) {
    builder
      .addCase(fetchJournals.fulfilled, (state, action) => {
        state.posts = action.payload;
      })
  },
});

As far as I know (and I tried and failed), you can't change the state in creatAsyncThunk and should update it with addCase, I'm stuck and need help to update state after all the fetching to be finished.

Ava Kim
  • 47
  • 1
  • 5
  • Try making it async with `async (userId) => {}` then use `await` inside on the part that returns a promise (I'm not familiar with `ref` or `onValue`). If these are callback or event based it's a bit trickier.. – timotgl May 17 '22 at 15:17
  • @timotgl I tried that too but since onValue keeps listening the event so async await couldn't be applied. (I found a ref here. https://stackoverflow.com/questions/50495594/firebase-onvalue-with-await-does-not-work-as-expected) – Ava Kim May 17 '22 at 15:21
  • It looks like https://firebase.google.com/docs/database/web/read-and-write#read_data_once suggests there is a `get` function that returns a promise, this one you can `await`. – timotgl May 17 '22 at 15:22
  • 1
    If you need the event listening (every new journal is put into redux store) then a classic thunk (not using `createAsyncThunk`) would be more helpful. It doesn't need to return anything. But you can do `onValue(query, (snapshot) => { dispatch({ type: 'SAVE_JOURNALS', payload: snapshot.val() }); })`. – timotgl May 17 '22 at 15:28
  • Thanks! I followed your advice and used a classic thunk. it worked! :) – Ava Kim May 18 '22 at 14:21

0 Answers0