NPM 包 redux-extract-state 使用指南
在前端开发中，Redux 已经变成了一个非常常用的状态管理工具。但是在实际开发中，我们有时候只需要获取其中一部分状态，而不是整个状态树。这时，redux-extract-state 这个 NPM 包就可以帮助我们从整个状态树中提取所需的状态。
redux-extract-state 是一个用于提取 Redux 状态树中指定部分状态的 JavaScript 工具库。在使用这个工具库的过程中，你将会学到如何从 Redux 状态树中提取所需的状态，并能够灵活地运用这个工具来实现自己的需求。
安装和导入
要使用 redux-extract-state，必须安装它。可以使用以下命令：
npm install --save redux-extract-state
安装完成后，可以像下面这样在项目中导入它：
import extractState from '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
