简介
redux-notif 是一个基于 Redux 的通知框架，用于在 Web 应用程序中显示通知，以便用户可以轻松看到相关信息。该框架的主要功能包括显示通知、隐藏通知、自定义通知的样式以及动画等。
安装
你需要先安装 Redux，然后再安装 redux-notif。可以使用下面的命令进行安装：
npm install redux redux-notif --save
使用
在使用 redux-notif 之前，需要先创建一个 Redux 应用程序。然后，需要在应用程序中添加 redux-notif 中间件。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- --------------
----- ----- - ------------
------------
----------------
-----------------
-
--在创建 store 对象时，需要将 notifMiddleware 添加到 applyMiddleware() 函数中作为参数。这将使 redux-notif 中间件成为 Redux 应用程序的一部分。
接下来，需要将 notifReducer 添加到 rootReducer 中。
import { combineReducers } from 'redux';
import { notifReducer } from 'redux-notif';
const rootReducer = combineReducers({
...
notifs: notifReducer
});现在，您的 Redux 应用程序已经与 redux-notif 集成，并且可以开始使用通知。
要显示通知，请使用 notifAction 函数。
-- -------------------- ---- -------
------ - --------- - ---- --------------
---------------
-----------
-------- ------ -------
----- -------
------------- ---- -- -------
--
--在此示例中，我们向 store 发送 notifSend 函数。此函数需要一个包含 message、kind 和 dismissAfter 属性的对象。其中，message 属性表示要显示的通知消息，kind属性表示通知类型（例如：info、warning、success、error），dismissAfter 属性表示通知将在多少毫秒后自动关闭。
在上面的示例中，通知将在5秒后自动关闭。如果你想手动关闭一个通知，可以使用 notifClear 函数。例如：
import { notifClear } from 'redux-notif';
store.dispatch(
notifClear(id)
);在此示例中，我们向 store 发送 notifClear 函数，并传入一个用于标识要关闭的通知的 id 值。此 id 值可以在发送通知时从 notifSend 函数的返回值中获取。
自定义通知
redux-notif 默认提供一些简单的样式，但也可以通过 CSS 来自定义通知的样式。
-- -------------------- ---- -------
------ - --------- - ---- --------------
---------------
-----------
-------- ------ -------
----- -------
------------- -----
------------- -------------------
--
--在此示例中，我们向 notifSend 函数传递了一个 extraClasses 属性，该属性是一个包含自定义 CSS 类的数组。这将使您可以自定义通知的样式，从而满足您的需求。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ---------------- ------------- --------- - ---- --------------
----- ----- - ------------
-------------
----------------
-----------------
-
--
-------- ----- -
----- ------------------ - -- -- -
---------------
-----------
-------- ------ -------
----- -------
------------- ----
--
--
-
------ -
---- ----------------
------- --------------------------------- ---------------------
------
--
-
----------------
--------- --------------
---- --
------------
-------------------------------
--总结
使用 redux-notif，我们可以很方便地在 Web 应用程序中显示通知，让用户时刻了解相关信息。本文介绍了 redux-notif 的基本使用方法，包括安装、配置和自定义样式，希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bf9