介绍
redux-fireuser 是一个针对 Redux 应用程序的 Firebase 用户验证库。
该库继承了 Firebase 官方库的 API，同时在 Redux 的框架上集成了核心功能。
在使用该库时，不需要了解 Redux 和 Firebase 的所有细节，只需要通过库提供的一些扩展 API 即可完成用户验证操作。
安装
推荐通过 npm 安装：
npm install redux-fireuser --save
初始化
首先，需要在应用程序中初始化 Firebase。
例如，通过使用 Firebase 官方的 firebase 包：
import firebase from 'firebase/app';
import 'firebase/auth';
firebase.initializeApp({
// ... your Firebase config
});然后，在应用程序的根目录下（例如，index.js）初始化 Redux Store，并将 redux-fireuser 作为 Redux Store 的一个 middleware：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - --------------------------- --------------- - ---- -----------------------
------ - ------------------------ ---------------- - ---- ------------------
------ - ------------- - ---- -----------------
----- ----------- - -----------------
--------- ----------------
---------- -----------------
---
----- ----- - ------------
------------
----------------
----------------
--
--
----- -------- - -
---------
------- ---
--------- ---------------
------------------------
--
----------------
--------- --------------
--------------------------- --------------
---- --
-----------------------------
------------
--------------------------------
--上述代码中的 config 对象可以包裹包含应用程序的 Firebase API key、auth domain、database URL、project ID 和 storage bucket 等参数。具体配置方法请参见 Firebase 官方文档。
使用
使用 redux-fireuser 时，最常用的几个 API 包括 signInWithEmailAndPassword、signOut、onAuthStateChanged 和 getUser 等，这些 API 对应了 Firebase 官方提供的 API。
登录
在 redux-fireuser 中，可以通过 signInWithEmailAndPassword API 完成登录操作。例如：
-- -------------------- ---- -------
------ - -------------------------- - ---- -----------------
----- ----------- - ----- -- -- -
--- -
----- --------------------------------- ---------- -- ------- ----- - -------- --
- ----- ------- -
------------------------
-
--当登录成功后，Redux Store 的状态将被更新。可以通过订阅 redux-fireuser 分支的状态，以便在用户状态发生变化时及时更新 UI。例如：
import {useSelector} from 'react-redux';
const App = () => {
const auth = useSelector(state => state.fireuser.auth);
return auth?.uid ? <LoggedInPage /> : <LoginPage />;
};上述代码中，state.fireuser.auth 是 redux-fireuser 在 Redux Store 中的状态路径。当用户登录成功后，该状态路径中将包含用户的 uid。
注销
在 redux-fireuser 中，可以通过 signOut API 完成注销操作。例如：
import { signOut } from 'redux-fireuser';
const handleLogout = async () => {
await signOut(); // 注销当前用户
};与登录操作类似，当注销成功后，Redux Store 的状态将被更新。可以通过订阅 redux-fireuser 分支的状态，以便在用户状态发生变化时及时更新 UI。
获取用户信息
在 redux-fireuser 中，可以通过 getUser API，获取当前已登录用户的信息。例如：
import { getUser } from 'redux-fireuser';
const handleGetUserInfo = async () => {
const userInfo = await getUser(); // 获取当前已登录用户的信息
};获取的 userInfo 对象包括用户的 uid、email、phoneNumber 等信息。
实时监听
在 redux-fireuser 中，可以通过 onAuthStateChanged API，实时监听用户状态的变化。例如：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------
----------------------- -- -
-- ------ -
----------------- -- ------ -----
- ---- -
----------------- -- ------ ------
-
---上述代码中，onAuthStateChanged 的回调函数将在用户状态发生变化时触发。
结论
通过 redux-fireuser 包的 API，可以简单方便地在 Redux 应用程序中集成 Firebase 用户验证功能。
在开发应用程序时，可以根据用户状态及时切换 UI 和操作，提高用户体验。
redux-fireuser 的详细文档可以在 GitHub 上查看。如果在使用过程中遇到问题，请尝试升级 Firebase SDK 或在 GitHub Issues 中提交问题的详细描述。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cd7