Redux-Reset 是一个可用于 React/Redux 应用程序的 npm 包，其作用是帮助您构建具有共享复杂状态树的应用程序。本文将为您介绍如何使用 Redux-Reset。
Redux-Reset 简介
Redux-Reset 是一个帮助您重置 Redux Store 状态的 npm 包。当您在应用程序中有一些复杂的状态树时，Redux-Reset 可以帮助您简化应用程序开发流程中的一些复杂部分。Redux-Reset 可以在应用程序中作为中间件使用。
在 Redux-Reset 中使用 resetMiddleware 函数可以重置 Redux Store 状态，同时也可以启动 Redux 路由到初始状态。此外，当使用类似 webpack 的构建工具时，Redux-Reset 还可以在应用程序静态构建版本中自动重置状态。
Redux-Reset 安装
您可以通过以下命令来安装 Redux-Reset：
--- - ----------- ------
或者使用 yarn 命令来安装：
---- --- -----------
Redux-Reset 使用教程
在您的 Redux Store 中使用 Redux-Reset，需要中间件函数 resetMiddleware。
在使用 resetMiddleware 函数之前，您需要将 redux-reset 添加到 redux 的 createStore 函数的第二个参数 applyMiddleware 中：
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- --------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
----------------
--
--使用 resetMiddleware 函数可以方便地重置 Redux Store。这也使得您可以让你的应用程序免受无限加载或内存泄漏的攻击。
在您的 action creator 中，您需要传递一个 RESET_STATE 的 action 来重置状态。例如：
------ - ----------- - ---- --------------
-------- ------------------ -
------ -
----- -----------
--
-请注意，您可以放置 RESET_STATE action 来重置任意数量嵌套的 reducers。
Redux-Reset 示例
以下是一个使用 Redux-Reset 的简单示例。该示例使用了 React/Redux 应用程序。让我们看一下如何在 Redux 存储中使用 Redux-Reset。
首先，我们需要创建我们的 reducer：
------ - ----------- - ---- --------------
----- ------------ - -
--------- -
-
--- --
----- ------ -------
--
--
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -------------
--------
------ ------
-
-
------ ------- ------------在 reducer 中，我们从 redux-reset 导入了 RESE_STATE，这样我们就可以在此处定义我们的状态。
然后，我们可以使用以下代码来创建一个简单的 React 组件：
------ ----- ---- --------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ---------------- - ---- ------------
----- --- ------- --------------- -
------------------ -
-------------
--------------------- - ---------------------------------
-
------------------ -
----- - ---------------- - - -----------
-------------------
-
-------- -
----- - -------- - - -----------
------ -
-----
------- ------------- --------------------------------
----- -------
---------
----
----------------------- -- -
--- ------------------------------------
---
-----
------
--
-
-
-------- ---------------------- -
------ -
--------- ---------------
--
-
-------- ---------------------------- -
------ -------------------- ---------------- -- ----------
-
------ ------- ------------------------ -------------------------在这个组件中，我们通过导入我们的 action creator handleResetEvent 来处理点击 "Reset Message" 按钮的事件。
接着让我们看一下我们的 actions.js 文件：
------ - ----------- - ---- --------------
------ -------- ------------------ -
------ -
----- -----------
--
-最后，我们可以使用我们的 store.js 文件来创建我们的 Redux store：
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- --------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
----------------
--
--
------ ------- ------现在我们的 Redux-Reset 已经安装好了，我们就可以使用它了。
在这个例子中，我们使用了 resetMiddleware 函数来重置我们的页面状态。 当我们点击“Reset Message”后，我们几乎立即回到了 initialState 状态，重新显示了“Hello World”消息。 接下来，我们只需要在 React 组件中调用 handleResetEvent 方法即可。
结论
Redux-Reset 为您的应用程序提供了一种更加简单的方式来管理状态。 当您的 Redux 应用程序变得越来越大和复杂时，您可以使用 Redux-Reset 来更有效地管理您的状态，从而避免耗费时间和资源。
本文为 Redux-Reset 的使用教程，要了解更多关于 Redux-Reset 包的详细信息，请访问 redux-reset Github。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabcdb5cbfe1ea0610866