把 reselect 作为 redux 数据处理的最后一步

在 Redux 应用程序中,使用 reselect 可以更高效地处理数据。reselect 可以将平深层次嵌套的多个数据连接为一个数据,并有助于组织以前使用链式调用嵌套映射器的代码。

开始使用 reselect

要开始使用 reselect,首先需要安装它并将其导入应用程序中。您可以使用以下命令安装它。

--- ------- --------

安装完成后,您可以导入 reselect 并按照以下方式使用它。

示例代码:

------ - -------------- - ---- -----------

----- -------- - ----- -- ------------
----- ------------- - ------- --------- -- -----------------------------

----- ---------------- - ---------------
    ---------- ---------------
    ------- ----------- -- -
        ------ ----------------- -- ----------- --- ------------
    -
--

----- --------------- - ------- --------- -- -
    ----- ----- - ----------------------- -------------------
    ------ -
        -----
    --
--

上面的示例代码使用 reselect 提供的 createSelector 函数创建 getBooksByAuthor 选择器。选择器接收两个参数 - 具有读取及解释 state 对象的简单功能,并将它们与输出函数组合起来,从而指定选择器的行为,以输出其返回值。

reselect 中的流程

reselect 选择器可以内置记忆功能。这意味着,在该选择器执行时,在其数据来源更改之前,将缓存其计算结果。通过使用缓存,如果仅仅是数据不包含更新,reselect 可以避免昂贵重复执行的运算,从而更快地返回数据。

选择器会在调用它时计算并缓存其结果。下次调用时,reselect 可以检查此结果,必要时直接返回储存的结果,避免重复的计算过程。

reselect 的优势

使用 reselect 可以获得很多优势:

缓存结果

由于 reselect 可以记录数据来源的更改并缓存其结果,因此它们在避免昂贵重复运算过程方面非常有用。如果reselect 的数据更改并未更改,它将返回存储的结果。

这样可以优化和改善应用程序的性能和负载时间。

优化数据摄取

reselect 可以将嵌套和多层数据结构中的数据处理组织起来,并在后面使用最终输出结果,避免了简单的链式调用。

这样使得选择或建造嵌套对象更加简洁,有助于方便的代码阅读。

解耦关系

reselect 的最后一个好处是它帮助在应用的控制流中解耦关系。它将数据处理过程从实际使用此数据的组件中提取出来并将其置于选择器中。

这意味着,在组件层级更改时,我们可以避免运算处理与应用者组件的关系。因为我们可以单独更改选择器的行为,而不用更改组件。

结论

reselect 是一个非常重要的库,它可以提高 Redux 应用程序的性能并帮助解除应用控制流的关系。希望这篇文章对你对 reselect 的初步认识非常有帮助,以将其用作 Redux 应用程序的最后一步处理数据。

如果您想深入研究 reselect 的更多功能,请参阅以下文档:reselect GitHub 仓库

欢迎留言给我们反馈。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6706417cd91dce0dc85aaa5c