介绍
redux-toast-feedback 是一个支持 React 和 Redux 的文本提示组件。它可以帮助你在 Web 应用程序中实现统一的提示风格，并且可以自定义组件的样式和文本内容，非常适合快速开发前端应用。
安装
你可以通过 npm 安装 redux-toast-feedback：
npm install redux-toast-feedback --save
然后，你需要将该组件与 Redux 中间件进行关联，这样才能使用它的功能。在 Redux 的 createStore 函数中，使用 applyMiddleware 方法将 toastMiddleware 中间件添加到 Redux store 中：
import { createStore, applyMiddleware } from 'redux';
import { toastMiddleware } from 'redux-toast-feedback';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(toastMiddleware)
);使用
使用 redux-toast-feedback 非常简单，你可以在需要显示文本提示的组件中，通过引入 connect 方法，将组件与 Redux 进行连接，并在显示文本提示时，通过 dispatch 方法，向 Redux store 中添加一个 toast 对象。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----- - ---- -----------------------
------ - -------- - ---- -------------------
----- ----------- ------- --------------- -
------------- -
----- ----- - -
----- ----------
-------- --------
--------- -----------
--
---------------------------
-
-------- -
------ -
-----
------- ---------------------------------------------------
------ --
------
--
-
-
------ ------- ------------- - -------- ----------------在上面的代码中，我们向 toast 组件中添加了一个 success 类型的提示信息，提示位置为 top-right。在 MyComponent 组件中，我们将添加提示的方法 addToast 通过 props 传递给 connect 方法，这样就可以通过 this.props.addToast 方法向 Redux store 中添加一个 toast 对象。
API
redux-toast-feedback 支持一些常用的参数，可以通过 toast 对象进行配置：
| 参数 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| message | string | 显示的文本内容 | '' |
| type | string | 提示类型，支持 success、error、info 和 warning 四种 | 'info' |
| position | string | 提示位置，支持 top-left、top-right、bottom-left 和 bottom-right 四种 | 'bottom-right' |
同时，你也可以通过全局配置，自定义 toast 组件的样式和文本内容。在创建 Redux store 实例时，可以通过调用 toastMiddleware 函数，并将配置对象作为参数传入，来全局配置 toast 组件的样式和文本内容：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- -----------------------
------ ----------- ---- -------------------
----- ----------- - -
-------- -
---------- ----------------
-------- -------
--
------ -
---------- --------------
-------- -------
--
----- -
---------- -------------
-------- ------
--
-------- -
---------- ----------------
-------- ------
-
--
----- ----- - ------------
------------
---------------------------------------------
--在上面的代码中，我们定义了四种类型的提示信息的样式和文本内容，然后在调用 toastMiddleware 函数时，将配置对象作为参数传递进去，这样就可以全局配置 toast 组件。
示例
下面，我们将创建一个简单的示例，来演示 redux-toast-feedback 的使用。
首先，在 src/actions/index.js 文件中，定义一个 addToast 方法，用于向 Redux store 中添加 toast 对象：
export const addToast = (toast) => {
return {
type: 'ADD_TOAST',
toast
};
};然后，在 src/reducers/index.js 文件中，定义加入 toast 对象的 reducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- ----- - ------ - --- ------- -- -
------------------- -
---- ------------
------ ----------------- --------------
--------
------ ------
-
--
------ ------- -----------------
-----
---接下来，在 src/App.js 文件中，编写一个按钮组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- - ---- -----------------------
------ - -------- - ---- ------------------
----- --- ------- --------------- -
------------- -
----- ----- - -
----- ----------
-------- --------
--------- -----------
--
---------------------------
-
-------- -
------ -
-----
------- ---------------------------------------------------
------ --
------
--
-
-
------ ------- ------------- - -------- --------在上面的代码中，我们将 addToast 方法通过 props 传递给 connect 方法，这样就可以在按钮被点击时，向 Redux store 中添加一个 toast 对象。此外，我们也引入了 Toast 组件，并将它放在了组件的 render 方法中，这样就可以在 Redux store 中添加一个 toast 对象时，自动显示出提示。
最后，在 src/index.js 文件中，渲染 App 组件，并使用 Provider 组件和 createStore 函数来将 Redux store 和 App 组件关联起来：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- -----------------------
------ --- ---- --------
------ ----------- ---- -------------------
------ --------------
----- ----- - ------------
------------
--------------------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--这样，我们就创建了一个可以在点击按钮时，显示美观的文本提示框的示例。
总结
redux-toast-feedback 是一个实用的文本提示组件，它可以方便地实现统一的提示风格。通过本文的介绍，你可以学习到如何使用 redux-toast-feedback，以及如何自定义组件的样式和文本内容。在实际的开发中，你可以使用该组件，提高前端应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d0e