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

Question

createAsyncThunk从存储在集合中的 Google Firebase 获取笔记数据时，我使用Redux Toolkit 中的 APInotes

在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，您声明了一个承诺，但没有从函数本身返回任何值，所以基本上它是一个 javascript 问题，与 Redux/React 无关。

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

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

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

// 

在 MDN 文档中阅读有关 Promise 的更多信息。