Redux 是一个 JavaScript 应用程序的状态容器，它可以让我们管理 JavaScript 应用程序的状态并且可以在应用程序的不同部分进行分享与使用。 HOC 是一种 React 的设计模式，可以让我们把重复逻辑提取出来并且复用。
Redux 高阶组件（HOC）是将 Redux store 中的 state 传递到组件中的一种方式。它可以让我们把重复的代码抽象成可重用的逻辑，便于我们在不同组件之间进行复用，并且可以简化我们的代码。 在这篇文章中，我们将介绍 Redux HOC 的一些常见应用场景及其实现方法，并以项目实战为例进行说明。
Redux HOC 的应用场景
1. 认证
认证是大多数应用程序中必不可少的一个功能。 我们可以使用 Redux HOC 来处理用户登录和认证信息。我们可以使用 Redux 来管理用户的身份验证状态，并将这些信息传递到需要进行身份验证的组件中。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -------------------
----- ------------ - --------- -- -
----- --------------- - ----- ---
------ - ---------------- ------------------ -
--
----- ---------------- - ----- --
--------------------- - ---------- ---------- -- - --------- ----------- ---
------ -------------------------------------------
-
------ ------- -------------2. 路由守卫
路由守卫是一个常见的功能，在用户进行导航时，我们可能需要检查用户的权限。 我们可以使用 Redux HOC 处理路由守卫功能。我们可以使用 Redux 来管理用户的权限信息，并将这些信息传递到组件中。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -------------------
----- ------------ - ------ -- ----------- -- -
----- --------------- - ----- ---
------ - --------- --------------- -
--
----- ---------------- - ----- --
-------------- --- ---- - ---------- ---------- -- - --------- --------- ---
------ -------------------------------------------
-
------ ------- -------------3. 数据预处理
我们经常需要在应用程序中进行一些数据预处理工作。我们可以使用 Redux HOC 来处理这些数据预处理工作。我们可以使用 Redux 来管理数据，以及处理、过滤或转换数据，然后将这些数据传递给组件。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --------------------- - ----------- -- -
----- --------------- - ----- -- -
-- - ----- -----
----- ------------ - ----------------
-- -----------------
----- ------------------ - ------------------------ -- ----------------
-- --------
------ - ---------- ------------------ -
--
----- ---------------- - ----- --
---------- ---------- ---
------ -------------------------------------------
-
------ ------- ----------------------Redux HOC 的实现方法
Redux HOC 的实现方法非常简单。我们将创建一个组件并将其包装在一个 connect 函数中。然后，我们可以将该组件作为参数传递给已有的组件，从而将 Redux store 中的数据传递到组件中。
示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- --- ------- --------- -
-------- -
-- - ----- ------ ----- ---- -----
----- - ----- - - -----------
------ -
-----
----------------
------
--
-
-
-- - --- ----- ------- ----- --- ---- ----- -----
----- --------------- - ----- -- -
------ - ------ ----------- -
--
------ ------- ------------------------------我们还可以创建一个高阶组件，将包装在 connect 中的组件封装在其中，并将传递给 HOC 的属性传递到组件中。
示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- --------- - ------------------ -- -
----- --------- ------- --------- -
-------- -
-- - ----- ------ --- - ----- --
----- - ------ -------- - - -----------
------ -
-----
----------------
--- - ----- --- ---------------- ---
----------------- ---------- --
------
--
-
-
-- - ---------------- --- ------- ---- --------------- ----- -------
----- --------------- - ----- -- -
------ - ------ ----------- -
--
----- --------------------------- - -------------------------------------------
------ ----------
--
------ ------- ----------这样，我们就创建了一个名为 withTitle 的高阶组件，该组件可以接收一个组件作为参数并向其添加一个标题。 我们还将包装的组件包装在 connect 中，从而将 Redux 中的属性传递到组件中。
使用 withTitle 包装 App 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ --------- ---- --------------
----- --- ------- --------- -
-------- -
-- - ----- -------- --------- ----- ---- -----
----- - ------ ----- - - -----------
------ -
-----
----------------
----------------
------
--
-
-
------ ------- ---------------实战：使用 Redux HOC 处理用户登录和认证信息
在实现上述应用场景中，第一种是使用 Redux HOC 处理用户登录和认证信息。下面我们将通过一个简单的项目实战来说明。
1. 准备工作
我们需要准备一个基本的 React 应用程序，并安装 redux、react-redux 和 react-router-dom 三个包。
2. 创建 Redux store
我们需要先创建一个 Redux store，并将其注入到我们的应用程序中。
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--3. 创建认证和权限相关的 reducers
我们需要创建一个 auth reducer 来管理用户登录和认证信息。在这个 reducer 中，我们将有一个 token，表示用户是否已登录，并且将有一个 role，表示用户的角色。
-- -------------------- ---- -------
-- ----------------
----- ------------ - -
------ -----
----- ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------
------ - --------- ------ -------------- --
---- ---------
------ - --------- ------ ----- ----- ---- --
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
--
------ ------- ------------在我们的 rootReducer 中，我们将集中管理我们的 reducers。
-- -------------------- ---- ------- -- ----------------- ------ - --------------- - ---- -------- ------ ----------- ---- --------- ----- ----------- - ----------------- ----- ----------- --- ------ ------- ------------
4. 创建认证和权限相关的 HOC
我们将创建一个 HOC 来处理用户登录和认证信息。 在这个 HOC 中，我们将检查用户是否已登录。如果用户已登录，我们将返回组件，否则我们将重定向到登录页面。
-- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -------------------
----- ------------ - --------- -- -
----- --------------- - ----- ---
------ - ---------------- ------------------ -
--
----- ---------------- - ----- --
--------------------- - ---------- ---------- -- - --------- ----------- ---
------ -------------------------------------------
-
------ ------- -------------5. 在需要进行认证的页面中使用 HOC
现在我们可以使用这个 HOC 来处理需要认证的页面。我们将使用 RequiresAuth 将组件包装在其中，以便我们可以向组件中传递认证信息。
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ ------------ ---- -----------------
----- --------- - -- -- -
------ -
-----
------------------
--------------------
------
--
--
------ ------- ------------------------6. 处理登录和认证
登录页面可以使用 Redux 表单手动处理（也可以使用第三方库 formik 等）。当用户点击提交按钮时，我们将使用 Redux action 来处理用户的登录信息。
-- -------------------- ---- -------
-- ---------------
------ ----- ----- - ---------- --------- -- -
------ ---------- -- -
-- ------
------------- -- -
----- ----- - ----------- -- ------- -----
---------- ----- -------- -------- ----- ---
---------- ----- ----------- -------- ------- ---
-- ------
--
--
------ ----- ------ - -- -- -
------ - ----- -------- --
--详细代码实现可以参考 Redux HOC 项目实战。
总结
Redux HOC 是一种将 Redux store 中的数据传递到需要的地方的有效方式。通过使用 Redux HOC，我们可以减少代码的重复，提高代码的复用性。 本文中，我们介绍了 Redux HOC 的一些常见应用场景以及实现方法，并通过项目实战展示了如何使用 Redux HOC 处理用户登录和认证信息。知道了 Redux HOC 的应用场景和实现方法后，我们可以在需要使用到 Redux store 的地方使用 HOC，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6690956bdc1ed1a61b577aa0