在前端开发中，消息提示是非常常见和重要的功能。而 Redux 是一种常用的状态管理工具，有时候我们需要在 Redux 中管理提示信息。这时候，npm 包 @ttungbmt/redux-noty 可以帮助我们实现这一功能。
安装及基本用法
首先，我们需要在我们的应用中安装这个包：
npm install @ttungbmt/redux-noty
安装完成后，在我们的 Redux Store 中配置中间件即可使用：
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { notyMiddleware } from "@ttungbmt/redux-noty";
const middlewares = [thunk, logger, notyMiddleware];
const store = createStore(reducer, applyMiddleware(...middlewares));上面的示例中，我们首先引入了所需的依赖（redux, redux-thunk, redux-logger 和 @ttungbmt/redux-noty）。然后，我们在创建 store 的时候使用了 applyMiddleware 方法，并将 notyMiddleware 加入了中间件数组中。
下面，让我们来看一下如何在我们的应用中使用这个包。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - -------- - ---- -----------------------
----- ----------- - -- -- -
----- -------- - --------------
----- ----------- - -- -- -
---------------------------- ----- ------ --- ---------------
--
------ -
------- ----------------------------- ---------------------
-
-在上面的代码示例中，我们首先引入了 useDispatch 方法，然后在组件中定义了一个点击事件的处理函数 handleClick。该函数通过 dispatch 方法触发了 showNoty action（该 action 的第一个参数是消息的类型，第二个参数是消息的文本内容）。
当我们点击按钮时，就会触发一个消息提示框，内容为 "Your action was successful."。
另外，我们也可以在 showNoty 中传入一个可选的第三个参数，用来设置消息提示关闭的时间（单位是毫秒）。
深入理解
除了在应用中使用这个包来实现简单的消息提示功能，我们也可以通过深入了解其原理和使用方法，来扩展和优化其功能。
内置配置项
我们可以通过在 Store 的初始化时，传入一个配置对象来定制 @ttungbmt/redux-noty 的行为。该配置对象包含以下属性：
position：定义消息提示框的位置。可选值有"top-left"，"top-right"，"bottom-left"和"bottom-right"。默认为"top-right"。animationDuration：定义消息提示框动画的执行时间（单位是毫秒）。默认为300。animationEasing：定义消息提示框动画的缓动函数。默认为"ease-out"。
下面是一份示例配置，可以将其传入 createStore 方法中：
const config = {
position: "bottom-left",
animationDuration: 500,
animationEasing: "ease-in-out",
};
const store = createStore(reducer, applyMiddleware(thunk, logger, notyMiddleware(config)));自定义消息类型
默认情况下，@ttungbmt/redux-noty 内置了四个消息类型："success"，"error"，"warning" 和 "info"。如果我们想要在应用中使用其他的消息类型，可以通过 addNotyType 方法来实现。
import { addNotyType } from "@ttungbmt/redux-noty";
addNotyType('special', {
className: 'special-noty',
icon: '🎉'
});上面示例中，我们新增了一个名为 "special" 的消息类型。该类型的显示样式通过 "className" 属性来定义，其图标通过 "icon" 属性来设置。接下来，我们就可以在应用中使用 "special" 类型的消息了：
dispatch(showNoty("special", "Your action was very special"));自定义消息组件
除了能够自定义消息类型，我们还可以通过 setNotyComponent 方法，来自定义整个消息提示框的组件。
该方法接受一个参数，即一个自定义组件。下面是一个非常简单的示例：
-- -------------------- ---- -------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ---------------- - ---- -----------------------
------ --------------------- ---- -------------------------------------
------------------------ -- -
----- - ---------- --------- -------- - - ------
------ -
---- ---------------------- ---------------------- ----------- - -------------------- - ------
---------------------------------------------------------
------
--
---
----------------
--------- --------------
---- --
------------
-------------------------------
--上面的示例中，我们引入了一个自定义的 Message Component MyCustomNotyComponent。然后，我们通过 setNotyComponent 方法将其设置为 @ttungbmt/redux-noty 内部使用的组件。这样，我们就可以在应用中使用我们自定义的消息提示框了。
总结
通过本文，我们了解了 @ttungbmt/redux-noty 这个 npm 包的用法和原理。它为我们提供方便易用，且具有扩展性的消息提示功能，使我们在编写复杂的前端应用时，能够更加高效和便利。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067382890c4f7277584301