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