NPM 包 redux-extract-state 使用指南
在前端开发中，Redux 已经变成了一个非常常用的状态管理工具。但是在实际开发中，我们有时候只需要获取其中一部分状态，而不是整个状态树。这时，redux-extract-state 这个 NPM 包就可以帮助我们从整个状态树中提取所需的状态。
redux-extract-state 是一个用于提取 Redux 状态树中指定部分状态的 JavaScript 工具库。在使用这个工具库的过程中，你将会学到如何从 Redux 状态树中提取所需的状态，并能够灵活地运用这个工具来实现自己的需求。
安装和导入
要使用 redux-extract-state，必须安装它。可以使用以下命令：
--- ------- ------ -------------------
安装完成后，可以像下面这样在项目中导入它：
------ ------------ ---- ----------------------
执行这个导入语句后，你就可以使用它提供的方法了。
基础用法
redux-extract-state 的基础用法非常简单。只需要传入状态树和一个函数，函数的返回值将会作为提取后的状态，示例如下：
------ ------------ ---- ---------------------- ----- ----- - - -------- - ------ - -- ------ - ------ ------ --- ----- --- ----- --- -- -- ----- ------------ - ------------------- ------- -- --------------- -------------------------- -- - ------ - -
上面的示例中，我们传入一个状态树和一个函数，函数返回了状态树中 counter 对象。最终打印出来的结果就是一个仅包含 value 属性的对象。我们从整个状态树中提取出了一个自定义的对象，并将其作为提取后的状态返回了出来。
另外一种语法
redux-extract-state 也提供了另外一种语法来做同样的事情。这种语法相较于上面的语法更加简单，只需要传入要提取的状态树路径即可。示例如下：
------ ------------ ---- ---------------------- ----- ----- - - -------- - ------ - -- ------ - ------ ------ --- ----- --- ----- --- -- -- ----- ------------ - ------------------- ----------- -------------------------- -- - ------ - -
上例中，我们可以看到使用相对路径来提取状态树。
深度提取状态
redux-extract-state 还支持深度提取状态，可以方便地获取深层次的状态。为了说明这个问题，我们先看一下下面这个示例：
------ ------------ ---- ----------------------
----- ----- - -
-------- -
------ --
-------- -
--- --
-------- ------- -- ---------
--
--
------ -
------ ------ --- ----- --- ----- ----
--
--
----- ---------------- - ------------------- ------- -- -----------------------
------------------------------ -- - --- -- -------- ------- -- -------- -在我们的例子中，counter 对象有一个 details 对象，该对象又包含 id 和 message 两个属性。使用上面的方法，我们可以获取 counter 对象中深层次的 details 对象，并将其提取出来成为一个新的状态。
实战：使用 redux-extract-state 来管理 Redux 状态
了解了 redux-extract-state 的基础用法后，我们可以应用它来实现有意思的事情。在接下来的例子中，我们将创建一个管理 Redux 状态树的示例。
------ - ----------- - ---- --------
------ ------------ ---- ----------------------
----- --------- - -
------ -
----- ---
---------- ------
--
------- -
----- ---
---------- ------
--
--
----- ------- - ------ - ---------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
------ -
---------------
---------- -----
--
--
---- ---------------------
------ -
---------
------ -
---------- ------
----- ---------------
--
--
---- ----------------------
------ -
---------
------- -
----------------
---------- -----
--
--
---- ----------------------
------ -
---------
------- -
---------- ------
----- ---------------
--
--
--------
------ ------
-
--
----- ----- - ---------------------
----- ------------- - ------- -- ------------
----- -------------- - ------- -- -------------
----- ----- - ------------------------------ ---------------
----- ------ - ------------------------------ ----------------
------------------- -- - ----- --- ---------- ----- -
-------------------- -- - ----- --- ---------- ----- -
------------------ -- -
----- ---------- - ------------------------------ ---------------
----- ----------- - ------------------------------ ----------------
------------------------
-------------------------
---
-- --
-- - ----- --- ---------- ----- -
-- - ----- --- ---------- ----- -
-- - ---------- ----- ----- -- -
-- - ----- --- ---------- ---- -
-- - ---------- ------ ----- - - ----- ------- -- - ----- ----- - - -
-- - ----- --- ---------- ----- -
-- - ---------- ------ ----- - - ------ ------ -- -- - ------ ------ -- - - -在这个例子中，我们创建了一个 Redux store，并为其指定了初始状态和一个 reducer。然后我们构建了两个选择器函数来提取出 users 和 movies 这两个状态。
最后我们在 store 上注册了一个订阅函数，来监听 store 的变化。每当 store 的状态发生变化时，我们都会调用 extractState 来提取出 users 和 movies 这两个状态，并打印它们。
小结
redux-extract-state 是一个非常实用的 Redux 工具库，可以帮助我们从 Redux 状态树中提取出需要的部分，来简化我们的开发工作。通过本篇文章的介绍，你应该能够掌握其基本用法，并能够合理运用它来管理 Redux 状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ce361a36e0bce8c7a