在前端开发中，我们常常需要添加提示信息以便向用户展示操作的结果。这些提示信息可以是成功、错误、警告等类型。为了实现这个功能，我们可以使用最流行的 javascript 框架之一 redux。然而，redux 并不天然支持添加提示信息，而是需要引入特定的 npm 包，其中最受欢迎的包之一是 redux-bootstrap-flash。本文将为大家详细介绍如何使用 redux-bootstrap-flash。
redux-bootstrap-flash 简介
redux-bootstrap-flash 是一个基于 redux 和 react-bootstrap 的 npm 包，用于在 react 应用中添加 flash 消息提示，提醒用户操作结果。
使用 redux-bootstrap-flash，我们可以方便地添加 react-bootstrap 样式的提示信息。提示信息可分为成功消息、错误消息、警告消息和信息消息四种类型。主要特点如下：
- 基于 redux，可以快速中央管理和控制全局提示；
- 可以自定义提示信息样式，或选择 react-bootstrap 预定义的样式；
- 能够自动回收所有已经显示的消息。
安装
redux-bootstrap-flash 基于 redux 和 react-bootstrap，使用该库之前，需要先确保安装了这两个库。下面是基于 yarn 安装的流程。
- 安装 redux
$ yarn add redux
- 安装 react-redux
$ yarn add react-redux
- 安装 redux-bootstrap-flash
$ yarn add redux-bootstrap-flash
基本用法
安装好 redux-bootstrap-flash 后，我们需要将其添加到 redux 中。下面是在创建 redux store 的过程中，引入 redux-bootstrap-flash 的实现方法：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ - ---------- -- ---------------- ------- -- ------------ - ---- ------------------------ ------ ---------- ---- -------------- ----- ----------- - ----------------- ---- ----------- -------------- ------------- --- -- --- ---------- -------- ------ ------ ------ ----- ---------- - - ------ --------------- -- ----- ----- - ------------ ------------ ------------------------------ -- ------ ------- ------
在上述代码中，我们引入了 middleware 和 reducer，并将其传递给了 createStore() 方法。其中 reducer 包含所有 flash message 的状态和行为。而 middleware 的作用是处理 flash message 的删除行为，为其提供自动关闭功能。
添加成功、错误、警告、信息消息非常简单。只需要分别使用 addSuccessMessage()、addErrorMessage()、addWarningMessage() 和 addInfoMessage() 即可添加对应的消息。
下面是使用示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ ---------------- ------------------ -------------- - ---- ------------------------
----- --- ------- --------------- -
---------------- - ------ -- -
------------ -
---- ----------
------------------------------------------- -- - ------- ------------
------
---- --------
----------------------------------------- -- -- ----- ------------
------
---- ----------
------------------------------------------- -- - ------- ------------
------
---- -------
---------------------------------------- -- -- ---- ------------
------
--------
------
-
-
-------- -
------ -
-----
------- ----------- -- ------------------------------------- ------- ----------------
------- ----------- -- ----------------------------------- ----- ----------------
------- ----------- -- ------------------------------------- ------- ----------------
------- ----------- -- ---------------------------------- ---- ----------------
------
-
-
-
------ ------- ---------------以上代码中，我们首先引入相关的 redux-bootstrap-flash 包，然后定义了 handleAddMessage() 方法，用于添加特定类型的 flash message，并将其渲染到页面上。通过给不同的类型按钮绑定不同的 evenHandler，可以自由地添加各种类型的消息。
自定义样式
虽然 redux-bootstrap-flash 已经提供了一些预定义样式供选择，但在实际开发过程中，我们通常还需要自定义样式以支持自己的项目。好在，redux-bootstrap-flash 对于自定义样式也提供了很好的支持。下面是使用示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- - ---- ------------------------
------ - ----- - ---- ------------------
------ ----- ---- -------------- -- --------------
----- --- ------- --------------- -
---------------- - -- -- -
---------------------------------------------- ------- ---- ---------- -------- -
---------- ------------------
----
-
-------- -
------ -
-----
------- ----------------------------------- ------- ------- ---- ---------- --------------
------ ------------------------------ --
------
-
-
-
------ ------- ---------------以上代码中，我们首先通过引用 Alert 从 react-bootstrap 中获取一个对象，然后使用 successClass 样式实现了自定义样式。最后通过传递 className 属性，将自定义样式应用到 flash message 上。
总结
通过本文的介绍，我们学习了如何在 react 应用中使用 redux-bootstrap-flash 实现 flash message 提示。与其他 flash message 库不同的是，redux-bootstrap-flash 提供了基于 redux 的中央管理能力以及自定义样式的灵活性。我们可以轻松地添加各种类型的消息，并为其定义适合自己项目的样式。希望本文对大家能够提供帮助，让开发更加顺利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3681e8991b448daf69