React 是目前最流行的前端框架之一，Redux 则是 React 的状态管理工具。在本文中，我们将介绍如何使用 React 和 Redux 打造一个完整的用户认证系统。本文将详细讲解每个步骤，并提供示例代码和指导意义。
第一步：创建 React 应用
首先，我们需要使用 create-react-app 工具创建一个 React 应用。打开终端并输入以下命令：
npx create-react-app auth-system
这将创建一个名为 auth-system 的新项目。接下来，我们需要进入该项目并启动开发服务器：
cd auth-system npm start
现在，我们已经成功创建了一个新的 React 应用，并在本地服务器上运行。
第二步：添加 Redux
接下来，我们将为我们的应用添加 Redux。首先，我们需要安装 redux 和 react-redux：
npm install redux react-redux
接下来，我们需要创建一个 Redux store。在 src 目录下创建一个名为 store.js 的新文件，并添加以下代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - ---
-------- ------------- - ------------- ------- -
------ ------------- -
--------
------ ------
-
-
----- ----- - ---------------------
------ ------- ------在上面的代码中，我们创建了一个名为 initialState 的初始状态对象，以及一个 reducer 函数。这个 reducer 函数处理不同的 Redux 动作，并返回新的应用状态。我们还使用 createStore 函数创建了 Redux store，并将其导出以供应用程序使用。
接下来，我们需要将 Redux store 与我们的 React 应用程序连接起来。在 src/index.js 文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们将 React 应用程序包装在 Provider 组件中，并将 Redux store 作为属性传递给它。这使得我们的应用程序中的所有组件都可以访问该 store。
现在，我们已经成功添加了 Redux，并将其连接到我们的 React 应用程序中。
第三步：添加用户认证
接下来，我们将为我们的应用程序添加用户认证。我们将使用 Firebase 作为我们的认证后端，因为它是一个流行的云服务，提供了易于使用的身份验证 API。
首先，我们需要在 Firebase 上创建一个新项目，并启用身份验证服务。接下来，我们需要将 Firebase 配置添加到我们的应用程序中。在 src 目录下创建一个名为 firebase.js 的新文件，并添加以下代码：
-- -------------------- ---- ------- ------ -------- ---- --------------- ------ ---------------- ----- -------------- - - -- ----- -------- -- -- --------------------------------------- ------ ------- ---------
在上面的代码中，我们使用 Firebase SDK 初始化了 Firebase 应用程序，并将其导出以供应用程序使用。
接下来，我们需要在我们的应用程序中添加一个用户认证组件。在 src 目录下创建一个名为 Auth.js 的新文件，并添加以下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -------------
-------- ------ -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
-------- ------------------------ -
-----------------------------
-
-------- --------------------------- -
--------------------------------
-
----- -------- ------------- -
--- -
----- ------------------------------------------------- ----------
- ----- ------- -
---------------------
-
-
----- -------- -------------- -
--- -
----- ----------------------------------------------------- ----------
- ----- ------- -
---------------------
-
-
----- -------- -------------- -
--- -
----- --------------------------
- ----- ------- -
---------------------
-
-
------ -
-----
------ ------------ ------------- ---------------------------- --
------ --------------- ---------------- ------------------------------- --
------- ------------------------------------
------- --------------------------------------
------- --------------------------------------
------
--
-
------ ------- -----在上面的代码中，我们创建了一个名为 Auth 的 React 组件，并使用 useState 钩子来跟踪电子邮件和密码输入字段的值。我们还使用 Firebase 身份验证 API 提供了三个不同的处理函数，用于登录、注册和注销用户。
现在，我们已经成功添加了用户认证功能，并可以在我们的应用程序中使用它。
第四步：使用 Redux 管理认证状态
在前面的步骤中，我们已经成功添加了用户认证功能，但我们还没有将其与 Redux 集成。在本步骤中，我们将使用 Redux 管理用户认证状态。
首先，我们需要定义一些 Redux 动作。在 src 目录下创建一个名为 auth.js 的新文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ ----- -------------- - -----------------
------ -------- -------------- -
------ -
----- --------------
--
-
------ -------- ------------------ -
------ -
----- --------------
-------- -----
--
-
------ -------- ------------------- -
------ -
----- --------------
-------- ------
--
-
------ -------- --------------- -
------ -
----- ---------------
--
-
------ -------- ------------------- -
------ -
----- ---------------
-------- -----
--
-
------ -------- -------------------- -
------ -
----- ---------------
-------- ------
--
-
------ -------- --------------- -
------ -
----- ---------------
--
-
------ -------- --------------- -
------ -
----- ---------------
--
-
------ -------- -------------------- -
------ -
----- ---------------
-------- ------
--
-在上面的代码中，我们定义了三个不同的 Redux 动作：登录、注册和注销。每个动作都有三个不同的变体：请求、成功和失败。我们还定义了一些辅助函数，用于创建这些动作。
接下来，我们需要更新我们的 Redux store 和 reducer。在 src/store.js 文件中，添加以下代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -
--------------
--------------
--------------
---------------
---------------
---------------
---------------
---------------
---------------
- ---- ---------
----- ------------ - -
----- -----
---------- ------
------ -----
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
---------- -----
------ -----
--
---- --------------
------ -
---------
----- ---------------
---------- ------
------ -----
--
---- --------------
------ -
---------
---------- ------
------ ---------------
--
---- ---------------
------ -
---------
---------- -----
------ -----
--
---- ---------------
------ -
---------
----- ---------------
---------- ------
------ -----
--
---- ---------------
------ -
---------
---------- ------
------ ---------------
--
---- ---------------
------ -
---------
---------- -----
------ -----
--
---- ---------------
------ -
---------
----- -----
---------- ------
------ -----
--
---- ---------------
------ -
---------
---------- ------
------ ---------------
--
--------
------ ------
-
-
----- ----------- - -----------------
----- ------------
---
----- ----- - -------------------------
------ ------- ------在上面的代码中，我们更新了我们的 reducer 函数，以处理我们新定义的 Redux 动作。我们还使用 combineReducers 函数将多个 reducer 函数组合成一个根 reducer 函数。
现在，我们已经成功将用户认证状态管理到我们的 Redux store 中。
第五步：使用 Redux 中的认证状态
在前面的步骤中，我们已经成功将用户认证状态管理到我们的 Redux store 中。在本步骤中，我们将使用 Redux 中的认证状态来更新我们的用户认证组件。
首先，我们需要将 Redux 中的 auth 状态映射到我们的 Auth 组件。在 src/Auth.js 文件中，添加以下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ -
-------------
-------------
-------------
--------------
--------------
--------------
--------------
--------------
--------------
- ---- ---------
------ -------- ---- -------------
-------- ----------- -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
-------- ------------------------ -
-----------------------------
-
-------- --------------------------- -
--------------------------------
-
----- -------- ------------- -
---------------------
--- -
----- -------------- - ----- ------------------------------------------------- ----------
----- ---- - --------------------
-------------------------
- ----- ------- -
---------------------
----------------------------------
-
-
----- -------- -------------- -
----------------------
--- -
----- -------------- - ----- ----------------------------------------------------- ----------
----- ---- - --------------------
--------------------------
- ----- ------- -
---------------------
-----------------------------------
-
-
----- -------- -------------- -
----------------------
--- -
----- --------------------------
----------------------
- ----- ------- -
---------------------
-----------------------------------
-
-
-- ----------------- -
------ ----------------------
-
-- ------------ -
------ -
-----
------ -- -- ------------------- ------- --------------------------------------
------
--
-
------ -
-----
------ ------------ ------------- ---------------------------- --
------ --------------- ---------------- ------------------------------- --
------- ------------------------------------
------- --------------------------------------
------
--
-
-------- ---------------------- -
------ -
----- ----------------
---------- ---------------------
------ -----------------
--
-
----- ------------------ - -
-------------
-------------
-------------
--------------
--------------
--------------
--------------
--------------
--------------
--
------ ------- ------------------------ --------------------------在上面的代码中，我们使用 connect 函数将 auth 状态映射到我们的组件。我们还将我们的处理函数包装在 Redux 动作创建器中，并将它们作为 mapDispatchToProps 参数传递给 connect 函数。
现在，我们已经成功使用 Redux 中的认证状态更新了我们的用户认证组件。
结论
在本文中，我们介绍了如何使用 React 和 Redux 打造一个完整的用户认证系统。我们从创建 React 应用程序开始，然后添加了 Redux，并使用 Firebase 添加了用户认证功能。接下来，我们使用 Redux 管理了用户认证状态，并将其与我们的用户认证组件集成。最后，我们成功使用 Redux 中的认证状态更新了我们的用户认证组件。本文提供了详细的指导意义和示例代码，希望能帮助你更好地理解 React 和 Redux，并为你的下一个项目提供有用的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67592e3836908a98ca6a50cc