前端开发中，状态管理对于应用程序的设计和复杂程度非常重要。在 React 应用程序中，Redux 是一个流行的状态管理工具。然而，Redux 自身不提供任何数据结构或核心结构。因此，我们需要使用 Redux 相关的 npm 包。其中一个优秀的 npm 包是 redux-shape。
redux-shape 是一个基于对象形状的 Reducer 帮助程序。其目标是简化 Redux 的初始设置并为状态多维数组中的复杂应用程序提供帮助。
这篇文章将向您展示如何使用 redux-shape、它的优点以及如何将它应用于您的应用程序。
安装
首先，我们需要使用 npm 安装 redux-shape：
--- ------- ----------- ------
然后，在您的应用程序中添加它：
------ - ------------- - ---- -------------
接下来，您可以开始使用 redux-shape。
数据对象的形状
redux-shape 帮助程序的一个重要特性是对象形状。在需要处理多个重要状态的应用程序中，快速访问联机状态可能很有用。redux-shape 中，您可以使用对象形状自定义状态。
------ - ------------- - ---- -------------- ----- ------------ - - --------- ------ ----- -- -- ------ ------- --------------------------- - ------------------- ------- ------- -- -- --------- --------- ----- ----- ----------- --- --------------------- ------- ------- -- -- --------- --------- ------ ----- -- -- ---
在这个示例中，我们使用用户验证行为创建一个 Reducer。每次登录成功或退出登录时都会分别调用 USER_AUTHENTICATED 和 USER_UNAUTHENTICATED。在状态更改中，我们使用前一状态和行为的负载进行简单合并。
使用组合
由于 redux-shape 帮助程序的对象形状和用于对象排序的“shape”概念，您可以轻松地进行组合。例如，您可以将多个 Reducer 组合在一起：
------ - ------------- - ---- ------------- ------ - --------------- - ---- ------- ------ - --------------- ---------------- ---------------- - ---- ----------------- ----- ------------ - --------------- ------- ----- -- - ----------------- ------- -- -- -- --------- ------- ---- --- ------------------ ------- -- -- -- --------- ------- ----- -- -- ----- ----------- - --------------- ----- --- --------- ----- -- - ------------------- ------- - ---- -- -- -- --------- ----- --------- ---- -- -- ------ ------- ----------------- ------ ------------- ----- ------------ --
在这个示例中，我们创建了两个 Reducer：modalReducer 和 userReducer。在 combineReducers() 中，我们将它们组合在一个 Reducer 中。
如何使用 redux-shape
setup
首先，在您的应用的文件中导入依赖：
------ - -------------- -------------- - ---- -------------
声明初始状态
现在，您声明应用程序的初始状态：
----- ------------ - - ------------- --- -------------- ------ ------------- ---- --
定义 action 类型
接下来，您要定义可以触发状态更改的所有操作。一个为 action 定义一个常量对于文档和清晰度非常有用：
----- -------- - ----------- ----- ----------- - -------------- ----- ----------------- - -------------------- ----- ---------------- - -------------------
创建 action
在应用程序中的组件上创建 action 函数。例如，这个函数会触发 SET_POST 操作：
------ ----- ------- - ------ -- -- ----- --------- -------- - ---- - ---
请注意，我们稍后将在创建 Reducer 时使用 SET_POST 类型。
创建 Reducer
现在是创建 Reducer 的时候。在这个过程中，我们将使用 createReducer：
----- ------- - --------------------------- -
----------- ------- ------- -- --
---------
----- --------------------
-------------- ------
------------- ----
---
-------------- ------- ------- -- --
---------
------------- ------------------- -----------------------
---
-------------------- ------- ------- -- --
---------
------------- -----------------
---
------------------- ------- ------- -- --
---------
-------------- ----
--
---Reducer 是一个功能。每个 Reducer 都有一个类型，以用于处理与该类型关联的状态更改。在这个示例中，“SET_POST”表示更改 post 属性。
还要注意的重要事项是，只要在 Reducer 中返回一个新的状态实例，我们就可以使用“…”运算符合并先前的状态并添加新状态，而不必担心任何意外的状态突变。
创建 selector
在 redux-shape 中，selector 是一个函数，它从您的状态对象中检索有用的值。redux-shape 中的 createSelector 函数是一个高阶函数，它接受一个或多个 selector 作为输入并返回一个新的 selector。例如：
----- ----------- - ------- -- ------------------- ----- --------------- - ------- -- ------------------- ------ ----- -------------------------- - --------------- ------------- ----------------- ---------- ------- -- ----------------------- -- -------------- --- ------- --
在这个示例中，我们创建了一个更具体的 selector，该 selector 返回一个用户给定“post ID”选择的所选后到它的所有评论的数组。
dispatching actions
在您的应用程序中，您可以使用 dispatch 函数将 action 提交到您的 store 中。例如：
------ - ------- - ---- ------------ ------ - ----------- - ---- -------------- ----- -------- - -------------- ----- -------------- - ------------------ -- - ------------------------ -- ---------- ----------
在这个示例中，我们定义了一个将 post 发送到 store 的 setPostHandler 函数。
总结
在本文中，我们学习了如何使用 redux-shape 包帮助我们在 React 应用程序中管理状态。我们还学习了如何声明状态的初始形状、定义 action 和使用 Reducer 和 selectors。通过使用 redux-shape，我们可以更方便地创建应用程序状态管理逻辑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668fcd9381d61a354105d