前言
Redux 是 React 应用程序中管理应用程序状态的最常用的库之一。它使用了单一不可变状态树的概念，通过 actions (动作) 和 reducers (规约) 对状态树进行更新。Redux 以可预测性和可测试性而出名，但其仅限于应用程序在内存中的数据存储。这意味着我们无法将应用程序的状态持久化到浏览器的存储介质中。
幸运的是，Redux 社区提供了一些库，可以让我们将 Redux 状态持久化到浏览器的存储介质中，如 local storage，IndexedDB 等等。在本文中，我们将深入探讨 Redux 持久化存储中的最佳实践。
Redux-persist
Redux-persist 是许多开发人员使用的 Redux 持久化存储库。它使用一种称为 “rehydration” 的进程，该进程使用存储区的信息重新生成应用程序状态。它支持多个存储介质的持久化，包括存储在内存中或本地储存器(如 local storage)中的存储信息的持久化。
Redux-persist 的核心部分是一个由保存和加载程序状态的实用程序组成的插件集合，以及一个存储库，该库将状态作为原始对象来处理，而非可持续化的。
以下是如何使用 redux-persist 的示例代码：
------ - --------------- - ---- ------- ------ - -------------- - ---- --------------- ------ ------- ---- --------------------------- ----- ----------- - ----------------- -- -------- ---- -- ----- ------------- - - ---- ------- -------- - ----- ---------------- - ----------------------------- ------------
在上面的代码中，我们首先将我们的 reducers 合并成一个 root reducer。接下来，我们使用 persistReducer 函数将我们的根 reducer 绑定到一个 persistConfig 对象。其中，persistConfig 对象包含键名 ‘root’以标识被存储的状态。storage 参数告诉 Redux-persist 将持久化存储到何处。
自定义的存储引擎
Redux-persist 提供了各种各样的存储引擎，如 local storage 和 IndexedDB。然而，如果您不想使用这些存储引擎，您可以通过创建自己的存储引擎进行定制。
以下是自定义存储引擎的示例代码：
------ - ------------- -------------- - ---- ---------------
------ ------------- ---- ---------------
----- ------------- - -
---- -------
-------- --------------
-
----- ----------- - ------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ----- -------------- -
--------
------ -----
-
-
----- ---------------- - ----------------------------- ------------
----- ----- - -----------------------------
----- --------- - -------------------在上述示例中，我们为 Redux-persist 使用了了内存存储引擎。即使浏览器退出或重新加载，存储数据也不会丢失。这在某些情况下很有用，例如测试中。
注意事项
在使用 Redux-persist 时，应当注意以下几点：
在使用持久化存储库之前，您应该认真考虑您应用程序中的状态，并询问自己哪些状态应该进行持久化以及它们的有效载荷大小。数据过大会导致性能瓶颈和存储空间浪费的问题。
在处理跨不同存储引擎之间的故障转移时，请确保您的应用程序使用立即将状态更新到存储引擎中的设计。
对于大多数持久化存储引擎而言，您应该将其视为异步进行的。这意味着您的应用程序状态不会立即更新，而是在存储引擎执行异步操作之后被更新。明智地使用回调函数以确保您的应用程序状态与实际存储状态同步。
您应该注意，对于某些持久化存储引擎而言，从存储引擎中获取数据是可变的。例如，IndexedDB 存储 API 可以返回函数字符串化的对象和数组，这些字符串化的对象和数组没有原型和实例方法。因此，您的应用程序行为可能会出现问题，需要谨慎处理。
结论
Redux-persist 向我们展示了持久性对于应用程序状态的重要性。在某些情况下，我们可能想在应用程序关闭或重新加载时保留状态。但是，由于将状态进行可持久化，考虑我们的应用程序状态及其大小，以及论如何确保在不同的存储引擎之间进行 崩溃转移 等等，这是非常棘手的工作。
通过遵循上述指导，您将能够创建可靠的、易于扩展的 Redux 应用程序，具有对于持久性的考虑。在您实现持久化的同时，您还可以探索可定制的存储引擎，如内存存储或自定义插件，以满足您应用程序的特定需求和限制。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671a0ccf9babaf620fa0ac06