在前端开发中，Notification 是非常常见的一个组件，用于向用户展示系统状态、操作结果等信息。而 React Notification System Redux 是一款 React 的 Notification 组件，它是基于 Redux 架构的高度可配置的通知系统，可以轻松地实现各种通知效果。本文介绍如何使用 npm 包 @types/react-notification-system-redux，让开发者更加轻松快速地集成 React Notification System Redux 到自己的项目中。
安装 @types/react-notification-system-redux 包
在使用 npm 安装 React Notification System Redux 之前，我们需要先安装 @types/react-notification-system-redux，它是 TypeScript 类型描述文件，用于为开发者提供更加友好的开发体验。在项目中引入该包可以有效减少代码错误，提高代码的可读性和可维护性。
使用下面的命令来安装 @types/react-notification-system-redux 包：
npm install @types/react-notification-system-redux --save-dev
使用 React Notification System Redux 组件
安装完 @types/react-notification-system-redux 包之后，我们就可以开始使用 React Notification System Redux 组件了。在这里，我们通过一个例子来讲解如何使用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ ------------------ ---- ----------------------------
------ - -------------- -- -------------------------- - ---- ----------------------------------
----- ------------ ------- --------- -
------------------- -
----------------------- - -----------------------------
-
----------------- -
-----------------------------------------
------ -----------
-------- ---- ---- --- -----------
------ ----------
---
-
-------- -
------ -
-----
------- --------------------------------------------- ---------------------
------------------- ------------------------ --
------
--
-
-
-------- ---------------------- -
------ -
-------------- --------------------
--
-
-------- ---------------------------- -
------ -
-------- ---------------------------------------------- ----------
--
-
------ ------- ------------------------ ----------------------------------首先，我们导入了需要的包，包括 NotificationSystem、bindActionCreators、connect 等等。通过 connect 连接 Redux，使得 Notification 可以从 store 中获取到 notifications，然后通过 bindActionCreators 将 NotificationActionCreators 中的 ActionCreators 与 dispatch 结合起来，方便调用。
在 componentDidMount 生命周期函数中，我们通过 ref 获取到了 NotificationSystem 的实例，这样就可以在 addNotification 函数中使用 this.notificationSystem.addNotification 方法来添加一个通知了。
最后，在 render 函数中，我们渲染了一个按钮，通过点击按钮来触发 addNotification 函数。我们也将 NotificationSystem 组件的 ref 设置为了 notificationSystem，这样在 componentDidMount 生命周期函数中才能获取到 NotificationSystem 实例。
注意事项
除了上面介绍的内容，还需要注意以下几点：
- 需要在 index.html 中引入 react-notification-system 样式文件：
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-notification-system/0.2.17/react-notification-system.css" rel="stylesheet" />
- 需要在 store 中添加 notifications reducer，这是一个必要的步骤：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------- -- ------------- - ---- ---------------------------------- ----- ----------- - ----------------- -------------- -- ---- ----- -------- -- ---- --- ------ ------- ------------
- 在使用 typescript 编写项目时，需要在 tsconfig.json 文件中添加以下配置：
-- -------------------- ---- -------
-
------------------ -
--------- -----
------------------ -----
--------------- -----
---------- ----
-------- -
---------------------------- -
------------------------------------------
-
-
-
-总结
在本文中，我们介绍了如何使用 npm 包 @types/react-notification-system-redux，让开发者更加轻松快速地集成 React Notification System Redux 到自己的项目中。我们通过一个例子来讲解了如何使用，并且指出了一些注意事项。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc189b5cbfe1ea0611e29