React 和 Redux 是现代 Web 开发中非常流行的前端框架，它们的结合能够帮助我们构建高效、可维护的 React 应用程序。然而，数据缓存在这种应用中显得尤为重要，这不仅会提高应用程序的响应速度，还能够确保应用程序的稳定性。因此，在本文中，我们将探讨 React+Redux 中的数据缓存和架构设计，并提供一些示例代码来帮助读者更好地理解。
为什么需要数据缓存？
在 React 和 Redux 应用中，数据是分布在不同的组件和 store（Redux 数据仓库）中的，而初次加载需要从服务器端获取数据。但如果每次数据都是从服务器重新获取的，那么这将会增加服务器的压力，同时还会增加应用程序的响应时间，显然这是不可取的。因此，我们需要对数据进行缓存，以减轻服务器的负荷和提高 Web 应用程序的性能。
除此之外，数据缓存还能帮助我们更好地处理离线模式。如果用户因为一些原因无法连接到网络，缓存的数据就能够帮助用户保持在线状态，直到他们能够重新连接网络为止。
数据缓存的架构设计
在 React+Redux 中，实现数据缓存的一种常见方法是使用 Redux Store 进行状态管理。因此，我们需要给 Store 加入数据缓存的能力。这可以通过引入一些中间件来实现，例如 redux-persist，它能够将 Store 中的数据持久化到本地存储（如 localStorage）中，并在应用程序重新载入时自动恢复这些数据。
当然，对于较为复杂的应用程序，这种简单的方式可能不够灵活。在这种情况下，我们需要采用更加高级的数据缓存方案，例如将数据分发到多个 Store（每个 Store 处理不同的数据集合）、使用缓存机制来避免重复数据请求等等。
下面，我们将基于这种思路构建一个简单的 React+Redux 应用程序，并使用 Redux-Persist 来实现数据缓存的功能。
1. 创建一个简单的 Redux Store
下面是一个简单的 Redux Store，该存储可以处理一个 To-Do 列表：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- ----------
------ -------------
---------- ------
--
--
--
---- --------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--
--------
------ ------
-
-
------ ------- -------------------------此 Store 可以处理 ADD_TODO 和 TOGGLE_TODO 操作，同时可以从 Store 中获取 To-Do 列表。
2. 在 App.js 中使用这个 Store
接下来，我们将在 App.js 中使用上面定义的 Store，并展示如何在应用程序中获取、添加和切换 To-Do 列表。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- ----- -
----- -------- - --------------
----- ----- - ----------------- -- -------------
----- ------------- - -- -- -
----- ------ - ------------ - --
----------
----- -----------
--- -------
------ ----- -----------
---
--
----- ---------------- - -- -- -
----------
----- --------------
---
---
--
------ -
-----
--------- ----------
----
--------------- -- -
--- --------------
----- -------- --------------- -------------- - -------------- - ------ ---
------------
-------
------- ----------- -- ------------------------------------------
-----
---
-----
------- ----------- -- -------------------- -------------
------
--
-
------ ------- ----如上述代码所示，我们使用 useDispatch 和 useSelector 隔离了 Store 和 View。其中 useDispatch 可以获取 Redux Dispatch 函数，而 useSelector 可以获取 Store 中的数据。
3. 添加 redux-persist 中间件
现在我们已经实现了一个简单的 To-Do 应用程序，而且我们可以使用 Store 来添加和切换 To-Do。但是，随着应用程序数据的不断增长，单纯地将数据存储在 Store 中可能会导致应用程序性能下降。因此，我们需要增加数据缓存的能力来应对可能的数据增长。
在使用 Redux 数据缓存方案时，对于持久化缓存，redux-persist 中间件是一个非常有用的工具。它提供了将 Store 中的数据持久化到本地存储中的能力，以及在应用程序重新载入时自动恢复 Store 中的数据。
首先，在命令行中运行以下命令来安装 redux-persist：
npm i redux-persist
接下来，我们需要将 redux-persist 进行中间件集成。这可以通过 applyMiddleware 方法完成，例如：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ------------- - -
---- -------
--------
---------- ----------
--
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- ----------
------ -------------
---------- ------
--
--
--
---- --------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--
--------
------ ------
-
-
----- ---------------- - ----------------------------- -------------
----- ----- - ----------------------------- -------------------
------ ----- --------- - --------------------
------ ------- ------如上例中，我们在 Store 实例上使用 applyMiddleware 方法，并将这个中间件集成到 Store 中。由于 redux-persist 依赖于持久化配置信息（在该例中是 key、storage、whitelist），因此我们需要将它们传递到 persistReducer 方法中。
我们可以通过 whitelist 来决定哪些 reducer 数据需要持久化，例如只需要持久化 todos，我们在本例中就必须设置 whitelist: ['todos']。
最后，我们导出了一个名为 persistor 的新常量，它可以通过 persistStore 方法来使用，该方法将 Store 实例作为其参数，并返回一个用于处理持久化存储的对象。
4. 使用 Provider 组件和 PersistGate 组件
当 Redux Store 配置完毕并添加了数据缓存中间件后，我们就可以在应用程序的根组件中使用这两个新组件，即 Provider 和 PersistGate。
Provider 组件是 Redux 提供的高阶组件，用于向 App 配置 Store。而 PersistGate 组件则用于在重新加载应用程序时恢复 Store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ ------ - --------- - ---- ----------
------ --- ---- --------
-------- ---------- -
------ -
--------- --------------
------------ -------------- ----------------------
---- --
--------------
-----------
--
-
------ ------- ---------如上述代码所示，我们将 Provider 和 PersistGate 组件放置在根组件 ReduxApp 中，并传递 store 作为 Provider 的 props 属性，包裹 PersistGate 组件，将 persistor 传递给 PersistGate 的 props。loading 参数用于在重新载入时及时显示页面元素，此处我们设置为 null。
现在，我们已经完成了数据缓存和架构的设计，并完成了一个简单的 To-Do 应用程序，在数据缓存方面也实现了高度抽象和可重用的功能。
结论
在 React+Redux 应用程序中，数据缓存仍然是一个非常重要的话题。通过使用 Redux Store 中的中间件，我们可以在应用程序中实现单一数据源的模型，并从服务器端获取数据时减少网络负载。同时，持久化到本地，使用缓存机制来避免重复数据请求方案也将成为日渐流行的趋势。最后，我们希望本文可以对你帮助，请勿照搬示例代码，而是应该结合自身实际项目需求加以实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674cfa62a336082f25471136