在大型 Web 应用程序中使用 Redux 可以管理应用程序状态的一致。但是随着 Redux 状态树的增长，我们需要考虑如何优化性能，避免重复的计算和网络请求。本文将介绍 Redux 缓存机制及如何在应用程序中实现它。
什么是缓存
缓存是一种在计算机程序中常用的技术，它使得程序能够在一段时间内记住已经计算过的结果。通常情况下，我们经常使用缓存来节省计算时间和减少网络请求。
在 Redux 中，我们可以使用缓存来保存已经计算过的数据。每当 Redux store 改变时，我们可以通过比较新旧数据的差异，决定是否更新缓存。这意味着我们可以使用先前计算的数据，而不必进行昂贵的计算或网络请求。
使用重选器（Reselect）实现缓存
在 Redux 中，重选器（Reselect）是用来选择和过滤某些数据的工具。它们可以被视为“计算衍生数据”的函数。而重点是，重选器会缓存它们计算出的结果，因此每次调用该方法时，它们不必重新计算。
让我们来看一个具体的例子。假设我们有一个 users 数据数组来代表一些用户，并且有一个简单的选择器用来过滤出活跃的用户：
----- -------------- - ------- -- ----------------- -- --------------
在这个例子中，每当 Redux store 变化时，该函数会被调用并重新计算。如果数据比较大或计算量较大，我们可能会出现性能问题。那么，我们如何解决这个问题？
我们可以使用 createSelector 函数创建一个明确定义了依赖的重选器。重选器只有在依赖项的值发生变化时才重新计算。这意味着对于相同的输入，我们将获得相同的输出，这是缓存的一个重要特性。
------ - -------------- - ---- ---------- ----- -------- - ----- -- ----------- ----- -------------- - --------------- --------- ----- -- ----------------- -- -------------- -
在这个示例中，我们使用 createSelector 函数来创建一个名为 getActiveUsers 的重选器。该函数需要两个参数：
- 第一个参数是一个函数数组，这些函数从 Redux store 中选择数据。在这个例子中，我们只有一个选择器函数
getUsers，它返回state.users。 - 第二个参数是一个计算函数，该函数将这些选择器的结果作为参数。在这个例子中，我们过滤出
isActive === true的用户。
现在，当 getActiveUsers() 被调用时，如果 state.users 的值没有更改，则结果仍然将被缓存使用。否则，我们将重新计算结果。
在组件中使用缓存
重选器不仅可以用于在 Redux store 中缓存数据，而且可以在组件中使用缓存。此时，我们可以使用 HOC（Higher Order Component）函数将数据传递给组件。
------ - ------- - ---- -------------
------ - -------------- - ---- ----------
----- -------- - ----- -- -----------
----- -------------- - ---------------
---------
----- -- ----------------- -- --------------
-
----- --------------- - ----- -- -
------ -
------------ ---------------------
-
-
------ ------- -------------------------------------在这个示例中，我们将 getActiveUsers 的结果作为 activeUsers 属性传递给 MyComponent。如果我们使用使用类似 react-redux 的库来连接 Redux store，那么每当 store 变化时，getActiveUsers 只会在需要时才被重新计算。
结论
缓存是提高性能的一种方法，可以避免昂贵的计算和网络请求。在 Redux 中，我们可以使用重选器来实现缓存，并明确定义依赖项。这使得在处理大型数据集时，我们可以更快地获取结果。同时，缓存也提高了代码的可维护性和可重用性。
在实际应用程序中，我们可能会使用一些其他的缓存方法，例如基于时间（time-based）或基于访问模式（access pattern）的缓存技术。然而，通过使用重选器来缓存衍生数据，是一种优秀的起点。
示例代码
完整的示例代码可以在以下代码中找到：
------ - ------- - ---- -------------
------ - -------------- - ---- ----------
----- -------- - ----- -- -----------
----- -------------- - ---------------
---------
----- -- ----------------- -- --------------
-
----- --------------- - ----- -- -
------ -
------------ ---------------------
-
-
------ ------- -------------------------------------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671223cdad1e889fe202fa97