前言
在日常的前端开发过程中，我们经常需要处理一些消息通知的方式。而在 React 项目中使用消息通知，我们通常使用第三方的库来解决，如 react-notification-system 和 react-toastify 等。
而今天我要介绍的是另外一个功能强大的消息通知库，名为 react-redux-notification。这个库的优点在于它集成了 Redux 状态管理库，能够方便的在应用程序的状态中进行操作。
下面，我将为大家详细介绍如何使用这个库并提供示例代码和实例演示。
安装 react-redux-notification
我们可以通过 npm 来安装 react-redux-notification 包，打开终端工具，运行以下命令：
npm install react-redux-notification --save
使用 react-redux-notification
在我们的 React 项目中使用 react-redux-notification 非常简单。我们只需要先引入 react-redux-notification 包，然后将其与 Redux 集成即可。下面是具体的步骤：
- 首先，我们需要创建一个 Redux store 来保存我们的消息通知数据。我们可以使用 combineReducers 部分来组合 reducer，示例如下：
import { combineReducers, createStore } from 'redux';
import { reducer as notifications } from 'react-redux-notification';
const reducer = combineReducers({
notifications,
});
const store = createStore(reducer);- 在我们的 React 应用程序中，我们需要将 redux 中的 store 与 react-redux-notification 中的 Provider 组件进行集成，代码如下：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------- -- ------------- - ---- ---------------------------
----- ------- - -----------------
--------------
---
----- ----- - ---------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--- 接下来，我们可以在应用程序中使用 react-redux-notification 提供的 Notification 组件来处理消息通知。以下是 Notification 组件的用法示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - --------------- - ---- ---------------------------
-------- ------------- -
----- -------- - --------------
-------- --------- -
---------
-----------------
------ ----------
-------- ----- ------ --- ---- --------- ---------------
------ ----------
--
--
-
------ ------- ---------------------- ----------------------
-在上面的示例代码中，我们首先使用 useDispatch hooks 函数来获取一个 dispatchAction 函数，然后使用该函数来派发一个 addNotification action。addNotification action 用于将消息通知添加到我们的 Redux store。
另外，需要注意的是，我们在 addNotification action 中传递了一个包含 title、message 和 level 的属性对象。这些属性值可用于定制消息通知的呈现方式。
示例代码
以下是一个完整的示例代码，包含所有的使用 react-redux-notification 的步骤。我们可以将其保存为一个名为 NotificationDemo.js 的文件，并将其运行在我们的 React 应用程序中。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ---------------- ----------- - ---- --------
------ - ------- -- ------------- - ---- ---------------------------
------ - ----------- - ---- --------------
------ - --------------- - ---- ---------------------------
----- ------- - -----------------
--------------
---
----- ----- - ---------------------
-------- ----- -
----- -------- - --------------
-------- --------- -
---------
-----------------
------ ----------
-------- ----- ------ --- ---- --------- ---------------
------ ----------
--
--
-
------ -
-----
---------------- ---------
------- ---------------------- ---------------------
------
--
-
----------------
--------- --------------
---- --
------------
-------------------------------
--实例演示
以下是本文示例代码的实例演示。你可以在下方的输入框中输入消息通知的标题和内容，然后点击 "Show notification" 按钮，预览消息通知的效果。
<script></script> <script></script> <script></script> <script></script> <script> const { Provider } = ReactRedux; const { createStore, combineReducers } = Redux; const { reducer: notifications, actions: { addNotification, removeNotification }, NotificationContainer, } = ReactReduxNotification; const reducer = combineReducers({ // Add the react-redux-notification's reducer to your rootReducer or combineReducer notifications, }); const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); function NotificationDemo() { const dispatch = ReactRedux.useDispatch(); const [title, setTitle] = React.useState(''); const [message, setMessage] = React.useState(''); function handleSubmit() { dispatch( addNotification({ title, message, }) ); } return ( <Provider store={store}> <div className="container mt-5"> <h2>Notification Demo</h2> <div className="form-group"> <label htmlFor="title">Title</label> <input type="text" className="form-control" id="title" value={title} onChange={(e) => setTitle(e.target.value)} /> </div> <div className="form-group"> <label htmlFor="content">Message</label> <input type="text" className="form-control" id="content" value={message} onChange={(e) => setMessage(e.target.value)} /> </div> <button className="btn btn-primary mt-3" onClick={handleSubmit}> Show notification </button> <NotificationContainer strokeColors={{ success: '#8bc34a' }} /> </div> </Provider> ); } ReactDOM.render(<NotificationDemo />, document.getElementById('notification-demo')); </script>总结
通过本文的介绍，我们可以看到 react-redux-notification 在消息通知中的使用非常灵活。同时该库还有一些其他的高级功能，包括在不同设备上进行自定义响应和设置自定义样式等。我们可以通过在 react-redux-notification 的 GitHub 仓库中了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8481e8991b448d9183