onAuthStateChanged 返回未定义

Question

我可以记录 onAuthStateChanged 的​​值，但是当我返回它时，extraReducers 似乎没有得到它。 功能检查auth的状态

import { createAsyncThunk, createSlice} from "@reduxjs/toolkit";
import {
  onAuthStateChanged,
  signOut
} from "firebase/auth";

export const checkUserSignIn = createAsyncThunk(
  "auth/checkUSerSignIn",
  async () => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log(user)
        return true
      } else {
        return false
      }
    });
  }
);

我在哪里得到返回值

const authSlice = createSlice({
  name: "auth",
  initialState: {
    auth: {
      isLoading: false,
      isAuthenticate: false,
      user: null,
    },
  },
  reducers: {},
  extraReducers: (builder) => {
    //Check User SignIn
    builder
      .addCase(checkUserSignIn.pending, (state, action) => {
        state.auth.isLoading = true;
        console.log(`CheckUserSignIn Pending: ${action.payload}`);
      })
      .addCase(checkUserSignIn.fulfilled, (state, action) => {
        state.auth.isLoading = false;
        action.payload
          ? (state.auth.isAuthenticate = true)
          : (state.auth.isAuthenticate = false);

        console.log(`CheckUserSignIn Fulfilled: ${action.payload}`);
      })
      .addCase(checkUserSignIn.rejected, (state, action) => {
        console.log(`CheckUserSignIn Rejected: ${action.error.message}`);
      });
    
    
  },
});

已完成案例的action.payload 始终返回未定义。我该如何解决？

祝大家有个愉快的一天！

Answer 1

onAuthStateChanged 是一个异步调用，但它本身并不返回一个 Promise。即使这样做了，您也不会从 checkUserSignIn 函数的顶级代码中返回任何内容。

这可能更接近您需要/想要的：

export const checkUserSignIn = createAsyncThunk(
  "auth/checkUSerSignIn",
  async () => {
    return new Promise((resolve, reject) {
      const auth = getAuth();
      const unsubscribe = onAuthStateChanged(auth, (user) => {
        unsubscribe();
        if (user) {
          resolve(true);
        } else {
          resolve(false);
        }
      });
    });
  }
);