【问题标题】：How to use firebase authentication with Redux Toolkit using onAuthStateChanged?如何使用 onAuthStateChanged 将 Firebase 身份验证与 Redux Toolkit 一起使用？
【发布时间】：2022-08-08 16:49:35
【问题描述】：

我正在尝试通过 Redux Toolkit 实现 Firebase 身份验证。但我认为由于缺乏知识，我错过了一些东西。

我的monitorAuthChange 返回undefined。

我有两个单独的文件 - 第一个 firebase 函数列表，第二个 Redux Toolkit 切片。

import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
} from \"firebase/auth\";
import { auth } from \"./firebaseConfig\";

export const createAccount = async (email, password) => {
  try {
    await createUserWithEmailAndPassword(auth, email, password);
  } catch (error) {
    console.log(error);
  }
};

export const monitorAuthChange = () => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      return true;
    } else {
      return false;
    }
  });
};

import { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";
import { createAccount, monitorAuthChange } from \"../../service/userServices\";

export const createUser = createAsyncThunk(
  \"users/createUser\",
  async ({ username, password }) => {
    await createAccount(username, password);
  }
);

const initialState = { loginStatus: false };

const userSlice = createSlice({
  name: \"users\",
  initialState,
  reducers: {},
  extraReducers: {
    [createUser.fulfilled]: (state, action) => {
      const result = monitorAuthChange();
      state.loginStatus = result;
    },
    [createUser.rejected]: (state, action) => {
      state.loginStatus = false;
    },
  },
});

export const selectAllUsers = (state) => state.users;
export default userSlice.reducer;

有两件事让我感到困惑：

1. Thunk 工作 - 它创建帐户，我在 Firebase 中看到它。我是否需要以不同的方式跟踪请求的结果？
2. 1. 如果在monitorAuthChange 中添加console.log(user)，它会记录数据取决于是否创建了用户。但仍返回未定义。希望阅读任何提示或建议或文章以了解我的错误。提前致谢。

标签： reactjs redux firebase-authentication redux-toolkit

【解决方案1】：

看来您想使用 onAuthStateChanged 跟踪用户身份验证你有很多方法可以将此回调插入到 redux。

你不能在 reducer 中调用monitorAuthChange，因为它们必须是纯的。

使用全局存储

// users.slice.ts
const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoginStatus: (state, action) {
      state.loginStatus = action.payload;
    }
  },
  extraReducers: {
    [createUser.fulfilled]: (state, action) => {
      state.loginStatus = true;
    },
    [createUser.rejected]: (state, action) => {
      state.loginStatus = false;
    },
  },
});

// trackUserAuth.ts
onAuthStateChanged(auth, (user) => {
    if (user) {
      store.dispatch(setLoginStatus(true))
    } else {
      store.dispatch(setLoginStatus(true))
    }
});

使用钩子

export const useAuth = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        dispatch(setLoginStatus(true))
      } else {
        dispatch(setLoginStatus(true))
      }
    });
    return unsubscribe;
  }, []);
}

【讨论】：