介绍
redux-notice 是一款基于 Redux 存储的全局通知管理库。它可以让你方便地管理全局通知，例如提示信息、错误信息等。
redux-notice 提供了许多自定义选项和 API，使得开发者能够自由地定制自己的通知样式和逻辑。
安装
使用 npm 安装：
npm install redux-notice --save
安装后，你需要在你的应用程序中引入依赖：
import { createStore } from 'redux';
import { noticeReducer, noticeMiddleware } from 'redux-notice';
const store = createStore(
noticeReducer,
applyMiddleware(noticeMiddleware)
);使用
发布通知
在需要发布通知的地方，调用 notice 函数：
import { notice } from 'redux-notice';
notice({
type: 'success',
message: '操作成功！'
});type 是通知的类型，可以是以下值之一：
success成功通知info信息通知warning警告通知error错误通知
message 是通知的内容，可以是任何字符串。
消费通知
你可以在 React 组件中使用 connect 函数来消费通知：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---- - ---- ---------------
----- ----------- ------- --------------- -
-------- -
----- - -------- ---------- - - -----------
------ -
-----
--------------------- -- -
---- --------------- ------------------ ------------------------
---- -------------------------------------------------
---- ------------------------ ----------- -- ------------------------------
------
---
------
--
-
-
----- --------------- - ------- -- --
-------- -------------
---
----- ------------------ - -
----------- ----
--
------ ------- ------------------------ ---------------------------------在组件中，我们将 notices（通知数组）和 hideNotice（关闭通知的函数）从 Redux store 中映射为组件的 props，然后在 render 函数中渲染通知。
自定义通知
你可以通过传递自定义配置项来自定义通知：
notice({
type: 'custom',
message: CustomNotice,
options: { /* 自定义选项 */ }
});type 可以是 'custom'，message 应该是一个 React 组件，options 是自定义选项。
在组件中，你可以通过 props.options 来获取自定义选项。
API
redux-notice 提供了以下 API：
notice(config)
发布一条通知。config 是通知的配置项。
hide(id)
关闭指定 ID 的通知。
hideAll()
关闭所有的通知。
setOptions(options)
设置通知的默认选项。options 是一个对象，包含了默认选项。
setHooks(hooks)
设置钩子函数。hooks 是一个对象，包含了下面这些钩子函数：
onShow(id, options)当通知显示时调用onHide(id)当通知关闭时调用
示例代码
这里是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- --------------
------ - -------------- ----------------- ------- ---- - ---- ---------------
----- ----- - ------------
--------------
---------------------------------
--
----- ----------- ------- --------------- -
-------- -
----- - -------- ---------- - - -----------
------ -
-----
--------------------- -- -
---- --------------- ------------------ ------------------------
---- -------------------------------------------------
---- ------------------------ ----------- -- ------------------------------
------
---
------
--
-
-
----- --------------- - ------- -- --
-------- -------------
---
----- ------------------ - -
----------- ----
--
----- -------------------- - ------------------------ ---------------------------------
--------
----- ----------
-------- -------
---
----------------
--------- --------------
--------------------- --
------------
-------------------------------
--在这个示例中，我们在应用程序中发布了一条通知，然后在 React 组件中使用 connect 函数来消费通知。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547581e8991b448d1bc3