随着前端开发的发展，越来越多的项目使用单页应用程序，对于网站页面的交互性越来越高要求，这时候就需要使用一个好的状态管理器来解决这个问题。
Redux是React生态中最常用的状态管理器之一，它的功能非常强大。但是，Redux在开发中还是会遇到一些问题，比如：如何实现通知消息的弹出。本文将介绍一个可以解决这个问题的 npm 包 - redux-simple-flash。
实现功能
redux-simple-flash 的功能是在React应用程序中处理各种消息通知，比如错误、成功、警告和一般性的消息。
redux-simple-flash 可以实现以下功能：
- 在页面中显示消息通知
- 根据消息类型显示不同的图标
- 可以在左上、左下、右上或右下位置显示某个消息通知
- 还有很多配置可以定制化，例如，你可以设置默认的停留时间。
安装
在使用 redux-simple-flash 之前，需要在项目中安装它。可以使用以下命令进行安装：
--- ------- ------ ------------------
使用
首先，需要使用 reducer 注册程序中的 flashMessage。这个 reducer 需要与其他程序中注册的 reducer 一起在 createStrore() 中使用。
实现 reducer 代码：
------ - --------------- - ---- --------
------ - ------------ - ---- ---------------------
----- ----------- - -----------------
------------- ------------
---
------ ------- ------------接下来，你需要在你的应用程序中使用 store.dispatch() 方法（这通常在 React 组件的方法中使用）来调用添加 flash message 的 action 。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------------- - ---- ---------------------
------ - ------ - ---- --------------------
----- ----------- ------- --------------- -
------------------ -
-------------
-
------------- -
----- - --------------- - - -----------
-----------------
----- ----------
----- ----- -- - ------- ------- ---- ---- --------- ----- - ---------
---
-
-------- -
------ -
-----
------- ------------------------------- ----------------
------
--
-
-
-- - ------------------ - -------- ------ ----- -
------ ------- ------------- - --------------- ----------------调用 addFlashMessage 方法就可以在页面的某个位置展示消息弹窗。
消息类型
redux-simple-flash 支持以下几种消息类型：
- success （成功）
- error （错误）
- warning （警告）
- info （消息）
每种类型都有自己的默认样式和图标。当你创建新的消息时，你可以带上相应的类型，这样就可以使用类型的默认样式和图标。理论上，你可以创建自己的消息类型。
定制化样式
redux-simple-flash 默认自带一套简单的样式，但是你也可以通过样式自定义，只需要在 CSS 样式中覆盖默认样式即可。
-- ------- --
-------------- -
--------- ------
------ ------
-------- -----
----------- -----
----------- -------
---------- -----
-------- -----
----------- - --- --- ------- -- -- ------
-------------- ----
------ --------
----------------- --------
-
-- ------- --
----------------------- -
------ --------
----------------- --------
-
-- ----- --
--------------------- -
------ --------
----------------- --------
-
-- ------- --
----------------------- -
------ --------
----------------- --------
-
-- ---- --
-------------------- -
------ --------
----------------- --------
-自定义停留时间
弹出的消息停留时间默认为 5 秒钟，这个可以通过添加一个 duration 属性来修改。
-----------------
----- ----------
----- ----- -- - ------- ------- ---- ---- --------- ----- -- ----------
--------- -----
---位置
默认情况下，新创建的 flash message 将显示在屏幕的右上方。可以使用以下示例来调整 flash message 的位置。
-----------------
----- ----------
----- ----- -- - ------- ------- ---- ---- ------ -- --- ----------- ------ -- --- ---------
--------- -----------
---总结
至此，我们就在 Redux 应用程序中添加了消息通知功能，使用 redux-simple-flash 这个 npm 包。在 React 开发中，遇到消息通知这个功能需求时，这个包提供了一种优秀的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8b56