在 React 应用开发中，全局消息提示是一种非常常见的需求。例如，当用户进行某些操作时，我们可能需要在页面顶部或者底部显示一条提示信息，告诉用户操作的结果。这些提示信息可能包括成功、失败、警告等等。
在本文中，我们将介绍如何使用 Redux 来管理 React 的全局消息提示。我们会从 Redux 的基本概念开始讲起，然后逐步深入，介绍如何设计和实现一个全局消息提示组件，并且提供一些示例代码和实用的指导意义。
Redux 基础概念
Redux 是一个状态管理库，它可以帮助我们在 React 应用中管理全局的状态。Redux 的核心概念包括：
- Store：保存应用的状态。
- Action：描述对状态的修改。
- Reducer：根据 Action 来修改状态。
Redux 的基本使用流程是：当用户进行某些操作时，我们会创建一个 Action，这个 Action 描述了操作的类型和参数。然后，我们将这个 Action 发送给 Redux，Redux 会根据这个 Action 来修改应用的状态。最后，我们将状态更新后的数据传递给 React 组件，让组件重新渲染。
设计全局消息提示组件
在我们的应用中，我们需要一个全局消息提示组件，用于显示用户的操作结果。这个组件应该满足以下要求：
- 可以显示成功、失败、警告等类型的消息。
- 可以自动隐藏消息，或者提供手动关闭的功能。
- 可以支持多条消息同时显示，以及消息的队列管理。
为了实现这个组件，我们需要设计一个状态树，用于保存消息的信息。这个状态树应该包括以下字段：
-- -------------------- ---- -------
-
--------- -
-
--- --
----- ----------
-------- -------
--------- -----
---------- --------------
------- ------
--
-- ---
--
-我们可以看到，这个状态树包括一个 messages 数组，用于保存所有的消息。每个消息包括以下字段：
id：消息的唯一标识符。type：消息的类型，可以是success、error、warning等。content：消息的内容。duration：消息的显示时间，单位是毫秒。timestamp：消息的创建时间，用于排序。closed：消息是否已经关闭。
接下来，我们需要设计 Reducer 来处理 Action，修改状态树。我们需要设计以下几个 Action：
ADD_MESSAGE：添加一条消息。REMOVE_MESSAGE：移除一条消息。CLOSE_MESSAGE：关闭一条消息。
Reducer 的代码如下：
-- -------------------- ---- -------
----- ------------ - -
--------- ---
--
-------- -------------------- - ------------- ------- -
------ ------------- -
---- --------------
------ -
---------
--------- ------------------- ----------------
--
---- -----------------
------ -
---------
--------- --------------------------- -- ------ --- ----------------
--
---- ----------------
------ -
---------
--------- ------------------------ --
------ --- -------------- - - ------- ------- ---- - - ---
--
--
--------
------ ------
-
-我们可以看到，Reducer 的实现很简单，它根据不同的 Action，来修改状态树中的 messages 字段。例如，当接收到 ADD_MESSAGE Action 时，Reducer 会将新的消息添加到 messages 数组中。
实现全局消息提示组件
有了状态树和 Reducer，我们现在可以实现全局消息提示组件了。我们需要在组件中订阅状态树的变化，以便在状态发生变化时更新组件的显示。
我们可以使用 useSelector 钩子来订阅状态树的变化：
const messages = useSelector((state) => state.messages);
然后，我们可以使用 map 函数来将状态树中的消息转换为组件：
const messageItems = messages.map((msg) => (
<Message key={msg.id} {...msg} onClose={() => dispatch(closeMessage(msg.id))} />
));在这个代码中，我们使用 Message 组件来渲染每一条消息。我们将状态树中的每个消息，传递给 Message 组件，然后在 Message 组件中显示这个消息的内容、类型、关闭按钮等。
最后，我们需要在组件中实现一个定时器，用于自动关闭消息。我们可以使用 useEffect 钩子来启动定时器：
-- -------------------- ---- -------
------------ -- -
----- ----- - ------------- -- -
-- --------- -
---------------------------
-
-- ----------
------ -- -- --------------------
-- -------- --------- --------- -----在这个代码中，我们使用 setTimeout 函数来启动一个定时器，定时器的时间是消息的 duration 字段。当定时器到期时，我们会检查这个消息是否已经被关闭，如果没有关闭，就会调用 closeMessage Action，关闭这个消息。
示例代码
下面是一个完整的示例代码，用于演示如何使用 Redux 来管理全局消息提示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------- --- ----- -------- --------- ------- ------- -- -
------------ -- -
----- ----- - ------------- -- -
-- --------- -
----------
-
-- ----------
------ -- -- --------------------
-- -------- --------- ----------
------ -
---- ------------------- ------- -------- - -------- - ------
---- -----------------------------------
-------- -- ------- ----------------- -----------------------------------
------
--
-
-------- ------------- -
----- -------- - --------------
----- -------- - ------------------- -- ----------------
----- ------------ - ------------------ -- -
-------- ------------ -------- ----------- -- ---------- ----- ---------------- -------- ------ --- --
---
------ ---- ----------------------------------------------
-
-------- ----- -
----- -------- - --------------
-------- ----------------- -------- --------- -
----- -- - -----------
----------
----- --------------
-------- - --- ----- -------- --------- ---------- ----------- ------- ----- --
---
-
-------- --------------------------- -------- - ----- -
---------------------- -------- ----------
-
-------- ------------------------- -------- - ----- -
-------------------- -------- ----------
-
-------- --------------------------- -------- - ----- -
---------------------- -------- ----------
-
------ -
---- ----------------
------- ----------- -- ---------------------------------------
------- ----------- -- -------------------------------------
------- ----------- -- ---------------------------------------
------------ --
------
--
-
------ ------- ----在这个示例代码中，我们定义了三个函数 showSuccessMessage、showErrorMessage 和 showWarningMessage，用于显示不同类型的消息。我们在组件中使用这些函数，就可以方便地显示全局消息提示了。
总结
在本文中，我们介绍了如何使用 Redux 来管理 React 的全局消息提示。我们设计了一个状态树和 Reducer，用于保存和修改消息的信息。然后，我们实现了一个全局消息提示组件，用于显示用户的操作结果。最后，我们提供了一些示例代码和实用的指导意义，帮助读者更好地理解和应用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3a61c2b3ccec22fc18914