从 Firebase 获取数据时，来自 Redux Toolkit 的 createAsyncThunk 会产生未定义的负载

Question

我正在使用 Redux Toolkit 中的 createAsyncThunk API 从存储在集合 notes

中的 Google Firebase 获取笔记数据

在notebookSlice.js中我定义了功能thunk和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;
      }


    }
  }

我在组件中使用它们 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 ( 
  ...

  )


}

我很确定我从 thunk 函数中获得了完整的数据，但是 state.notes 在获取具有最终 fulfilled 状态的数据后仍然为空。我的代码有什么问题？

Answer 1

在 fetchNotes 中，你声明了一个 promise 但没有从函数本身返回任何值，所以基本上它是一个 javascript 问题而不相关 Redux/React.

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

您当前的代码returns一个承诺，您需要在某个时候解决它。

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;
});

//

详细了解 promises in MDN docs。

从 Firebase 获取数据时，来自 Redux Toolkit 的 createAsyncThunk 会产生未定义的负载

createAsyncThunk from Redux Toolkit yields undefined payload when fetching data from Firebase

javascript

promise

reactjs

redux

redux-toolkit