随着前端技术的发展，越来越多的开源包被广泛应用于前端开发中。其中，react-notifier-system-redux 是一款通知系统的 React 组件，基于 Redux 实现数据状态管理，它使用方便且具有高度的可定制性，能够快速为我们的应用添加通知功能。本文将介绍 react-notifier-system-redux 的使用方式，包括安装、导入、配置和使用方法，并提供示例代码。
安装
react-notifier-system-redux 是一个 npm 包，需要使用 npm 或 yarn 进行安装。在终端中运行以下命令：
npm install --save react-notifier-system-redux
或
yarn add react-notifier-system-redux
导入
在应用程序的模块文件中，将 react-notifier-system-redux 组件导入到相应的位置，以便于应用中的其他组件可以使用该组件。导入方法如下：
import NotifierSystem from 'react-notifier-system-redux'
配置
react-notifier-system-redux 使用 Redux 存储通知数据，需要将组件包括在 React Redux 的提供者（Provider）组件中，以便于在应用程序的各个组件中能够访问到应用程序的状态。在应用程序的入口文件中，导入 react-redux 包，并对应用程序进行 Redux 配置，可以参照下面的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ------------ --------------- - ---- -------
------ - -------- - ---- -------------
------ --------------- ---- -------------
------ ----------- ---- ------------
------ --- ---- ------------------
----- ----- - ------------
------------
---------------------------------
-
----------------
--------- --------------
---- --
--------------- --
------------
-------------------------------
-在上面的代码中，createStore 函数创建了一个全局 Redux 存储对象。applyMiddleware 函数应用了 Redux 的中间件，这里使用了 redux-thunk 中间件。Provider 组件将应用程序的状态传递给子组件。App 组件和 NotifierSystem 组件是应用程序的核心组件。
使用方法
接下来，将介绍 react-notifier-system-redux 组件的使用方法。
显示通知
要显示通知，首先需要在组件中引入 showNotifier 函数。然后使用 showNotifier 函数触发通知。可以调用多次 showNotifier 函数来显示多个通知。以下是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - ------------ - ---- -----------------------------
----- ----------- ------- --------- -
------------- -
-------------------------
-------- ------- --------
----- ---------
--
-
-------- -
------ -
------- ---------------------------------------------------
-
-
-
------ ------- ------------- - ------------ ---------------在上面的代码中，我们定义了一个按钮，当按钮被点击时，它会调用 showNotifier 函数，在通知区域显示一个成功通知。通知具有消息和种类两个属性，通过调整这些属性可以控制显示的通知样式。通知种类属性可以是 'success', 'warning' 或 'danger'，具体效果请查看实际演示。
集成到其他组件中
react-notifier-system-redux 可以被集成到任何 React 组件中，使得通知可以在任何组件中显示，而不仅仅是在应用程序的入口文件中。可以通过 connect 函数将 NotifierSystem 组件映射到需要显示通知的组件中。以下是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - -------------- - ---- -----------------------------
----- ----------- ------- --------- -
------------- -
-------------------------
-------- ------- --------
----- ---------
--
-
-------- -
------ -
-----
------- ---------------------------------------------------
--------------- --
------
-
-
-
------ ------- ------------- - ------------ ---------------在上面的代码中，我们使用 connect 函数将 NotifierSystem 组件映射到 MyComponent 组件中，并在 MyComponent 组件中调用 showNotifier 函数以触发通知。
示例代码
以下是 react-notifier-system-redux 组件的完整示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - --------------- ------------ - ---- -----------------------------
----- ----------- ------- --------- -
------------- -
-------------------------
-------- ------- --------
----- ---------
--
-
-------- -
------ -
-----
------- ---------------------------------------------------
--------------- --
------
-
-
-
------ ------- ------------- - ------------ ---------------总结
react-notifier-system-redux 是一款方便易用、高度可定制、使用方便的通知系统组件。通过本文的学习和实践，我们可以更好地了解 react-notifier-system-redux 的使用方法，掌握如何将通知系统集成到 React 应用程序中，并在应用程序中使用通知系统。我们相信，通过深入学习和实践，我们将能够更好地运用 react-notifier-system-redux 这一应用于实际开发中的优秀 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058bf881e8991b448ed405