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

Posted 2023-02-19

【中文标题】从 Firebase 获取数据时，来自 Redux Toolkit 的 createAsyncThunk 会产生未定义的有效负载

【英文标题】：createAsyncThunk from Redux Toolkit yields undefined payload when fetching data from Firebase

【发布时间】：2020-10-03 03:01:19

【问题描述】：

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

在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 函数中获得了完整的数据，但在获取具有最终 fulfilled 状态的数据后，state.notes 仍然为空。我的代码有什么问题？

【参考方案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;
);

// 

阅读更多关于promises in MDN docs的信息。

【讨论】：

我想我发现了一个错字，它是'const data = await promise'，而不是最后的promise()。