实现Angular状态持久化的秘诀：ngrx-persist-state

Stone.Wu

于 2024-10-23 13:19:07 发布

阅读量1k

点赞数 11

本文链接：https://blog.youkuaiyun.com/weixin_42400643/article/details/143206124

版权

本文还有配套的精品资源，点击获取

简介：NgrxPersistState是一个为Angular应用提供的状态持久化库，与Ngrx Store紧密集成，允许状态在页面刷新或关闭后依然被保存和恢复，极大提升用户体验。使用TypeScript编写，确保了代码质量和开发效率。它实现了基于Ngrx Store的状态管理，并通过本地存储机制来实现状态持久化，使应用能够跨会话保持用户状态。NgrxPersistState适用于需要持久化状态的应用场景，如购物车、登录状态等，是构建高效Angular应用的有用工具。 ngrx-persist-state

1. NgrxPersistState与Ngrx Store集成

在构建现代单页应用程序（SPA）时，状态管理变得至关重要，尤其是当应用程序需要跨多个页面或组件维护状态时。Angular生态系统中的Ngrx库是一个基于Redux模式的状态管理解决方案，它允许开发者以可预测的方式管理复杂的状态。而NgrxPersistState则是Ngrx的一个扩展，它通过本地存储（如localStorage和sessionStorage）为Ngrx Store提供数据持久化的能力。

集成NgrxPersistState到Ngrx Store中涉及几个简单的步骤。首先，我们需要安装对应的npm包。然后，在Ngrx模块配置中启用 StorePersist ，并指定哪些状态需要持久化。接着，配置 storage 选项，以决定是使用localStorage还是sessionStorage，或者两者都用。

一旦配置完成，当状态发生变化时，NgrxPersistState会自动同步状态到本地存储中。这样，即使在页面刷新或完全关闭后重新打开应用程序，之前的状态也能够被恢复。这一过程对于提升用户体验至关重要，因为它能够帮助保持用户界面的连贯性并减少重复数据加载的等待时间。

// 安装NgrxPersistState
npm install @ngrx/persist-store

// 在Ngrx模块配置中启用 PersistStore
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StorePersist } from '@ngrx/persist';
import { storage } from '@ngrx/persist-storage'; // 使用localStorage

@NgModule({
  imports: [
    StoreModule.forRoot(reducerMap),
    EffectsModule.forRoot(rootEffects),
    StorePersist, // 启用持久化存储
  ],
  providers: [
    {
      provide: PERSIST Strateg, // 配置存储策略
      useValue: new LocalStoragePersiStrategy(),
      multi: true,
    }
  ],
})
export class AppModule {}

通过上面的配置和代码，我们可以确保Ngrx Store的状态被持久化，增强了应用的健壮性和用户体验。在后续章节中，我们将更深入地探讨如何优化这一集成过程，处理异常情况，并应用TypeScript进行更高质量的代码编写。

2. TypeScript编写与代码质量

在现代的前端开发中，TypeScript已经成为了一种流行的选择。它不仅扩展了JavaScript的功能，还通过静态类型检查增强了代码的健壮性。本章将深入探讨TypeScript的基础知识，如何在Ngrx项目中应用TypeScript提升开发效率，以及在项目中实现TypeScript与Ngrx的最佳实践。

2.1 TypeScript的基础知识

2.1.1 TypeScript的基本语法

TypeScript扩展了JavaScript的语法，添加了类型系统和一些其他特性。以下是TypeScript的一些基本语法元素：

类型注解：允许开发者为变量、函数的参数和返回值添加类型信息。
接口：可以定义一个对象的形状，确保对象遵循该结构。
类：TypeScript支持基于传统的面向对象编程。
模块：TypeScript支持通过ES6模块语法来组织代码，便于模块化开发。

2.1.2 TypeScript类型系统的应用

TypeScript的类型系统极大地提高了代码的可读性和可维护性。例如，使用枚举来定义一组相关的常量，或者利用泛型来编写可重用的组件，能够处理不同类型数据而不会丢失类型信息。

// 使用枚举定义购物车状态
enum CartStatus {
    Empty = 'empty',
    Loading = 'loading',
    Complete = 'complete',
}

// 定义一个泛型函数
function identity<T>(arg: T): T {
    return arg;
}

在上述示例中， CartStatus 枚举定义了一个购物车的状态集合，而 identity 函数则是一个泛型函数，它可以在不同类型上使用而不需要修改代码。

2.2 TypeScript在Ngrx项目中的应用

2.2.1 静态类型检查的优势

TypeScript的静态类型检查功能是其最突出的优势之一。它能够在代码运行之前就捕获许多常见的错误，从而减少运行时错误和bug。

// 使用TypeScript对Ngrx action进行类型约束
class AddToCart {
    readonly type = 'ADD_TO_CART';
    constructor(public productId: string, public quantity: number) {}
}

// 类型化的action创建函数
function addToCart(productId: string, quantity: number): AddToCart {
    return { type: 'ADD_TO_CART', productId, quantity };
}

在上述代码中，我们定义了一个 AddToCart action，并且为该action提供了类型约束，确保在创建action时参数类型正确。

2.2.2 提高开发效率的TypeScript特性

TypeScript不仅仅提供了静态类型检查，还有许多特性可以帮助开发者提升工作效率。例如，TypeScript的智能提示可以大幅减少寻找文档的时间，而类型推断则减少了必须声明的类型数量。

// 使用类型推断减少类型声明
let isUserLoggedIn = false; // TypeScript会推断出isUserLoggedIn的类型是boolean

上面的例子展示了TypeScript如何自动推断变量 isUserLoggedIn 的类型，从而减少手动标注类型的工作量。

2.3 TypeScript与Ngrx项目的最佳实践

2.3.1 接口和类在状态管理中的应用

在使用Ngrx进行状态管理时，TypeScript的接口和类能够帮助我们创建可预测和易于维护的状态结构。

// 使用接口定义状态结构
interface CartState {
    items: { [key: string]: number };
    total: number;
}

// 使用类定义状态的管理器
class CartManager {
    public cartState: CartState;

    constructor() {
        this.cartState = { items: {}, total: 0 };
    }

    // 在这里实现对状态的增删改查等操作
}

在这个例子中， CartState 定义了购物车的状态结构，而 CartManager 类则负责管理这个状态。

2.3.2 代码组织和模块化策略

TypeScript促进了模块化的代码组织方式，通过使用命名空间或ES6的模块系统，开发者可以将代码分割成多个独立的模块，以降低复杂性。

// 使用模块化组织action和reducer
// action creator模块
export const addProductToCart = (productId: string, quantity: number) => ({
    type: 'ADD_PRODUCT_TO_CART',
    payload: { productId, quantity }
});

// reducer模块
export function cartReducer(state: CartState = initialState, action: Action) {
    switch (action.type) {
        // 在这里处理action
        default:
            return state;
    }
}

通过模块化的方式，我们可以将不同的功能分割到不同的文件中，使得整个项目结构清晰，并且便于代码的复用和测试。

本章深入讲解了TypeScript的基础知识，以及如何在Ngrx项目中有效地应用TypeScript。下一章，我们将探讨持久化存储技术及其对前端开发的重要性。

3. 持久化存储技术实践

3.1 持久化存储的概念及重要性

3.1.1 什么是持久化存储

持久化存储是指将数据保存在非易失性存储介质中，确保数据在系统崩溃、电源故障或其他意外情况发生后仍然可以被恢复的技术。在前端开发中，常见的持久化存储方法包括 localStorage 、 sessionStorage 、Cookies以及使用IndexedDB等。这些技术使得Web应用能够存储和读取用户的个人信息、偏好设置以及应用状态等信息。

3.1.2 持久化存储在前端的重要性

对于用户而言，前端应用的响应速度和数据的连贯性是重要的体验指标。持久化存储技术的应用能够帮助前端应用维持用户的状态，减少因刷新或重新加载页面而造成的冗余操作，加快页面恢复速度，从而提高用户体验。此外，前端的离线功能也依赖于持久化存储来维持关键数据和缓存信息。

3.2 localStorage与sessionStorage的区别与选择

3.2.1 localStorage的工作机制

localStorage 提供了一个在浏览器会话之外持久保存数据的方式，数据可以被永久保存，即使关闭浏览器窗口或标签页，重新打开后数据仍然存在。 localStorage 拥有5MB（某些浏览器可能更多）的存储空间限制，它通过键值对的形式存储数据，提供了一个异步的API来访问数据。

3.2.2 sessionStorage的特性及使用场景

与 localStorage 不同的是， sessionStorage 仅在同一个标签页或浏览器窗口中有效，当页面会话结束（即窗口关闭）时，存储的数据会被清除。 sessionStorage 的使用场景包括保存登录信息、页面间临时数据共享等，它同样提供键值对的存储方式和异步API接口。

3.3 使用localStorage或sessionStorage进行数据持久化

3.3.1 实现数据持久化的步骤

存储数据： 使用 localStorage.setItem('key', 'value') 或 sessionStorage.setItem('key', 'value') 来存储数据。
读取数据： 使用 localStorage.getItem('key') 或 sessionStorage.getItem('key') 来获取数据。
删除数据： 使用 localStorage.removeItem('key') 或 sessionStorage.removeItem('key') 来删除数据。
清空存储： 使用 localStorage.clear() 或 sessionStorage.clear() 来清除所有数据。

3.3.2 存储限制和安全性考量

虽然 localStorage 和 sessionStorage 提供了便利，但开发者需要意识到它们的存储限制和安全风险： - 存储空间有限制，超过限制则无法存储新的数据。 - 存储的内容是明文，不应存放敏感数据。 - 跨域限制，不同域名下的应用无法相互访问存储的数据。

为了安全性，建议敏感信息加密后再存储，并在后端处理更加敏感的操作。同时，应避免存储大量的数据，以免影响Web应用的性能。

代码示例：

// 存储数据
localStorage.setItem('user', JSON.stringify({ username: 'admin' }));
sessionStorage.setItem('searchQuery', 'Ngrx PersistState');

// 获取数据
const user = JSON.parse(localStorage.getItem('user'));
const searchQuery = sessionStorage.getItem('searchQuery');

// 删除数据
localStorage.removeItem('user');
sessionStorage.removeItem('searchQuery');

逻辑分析： - 上述代码展示了如何使用 localStorage 和 sessionStorage 来存储和检索基本数据。 - 使用 JSON.stringify() 和 JSON.parse() 是因为存储的数据需要是字符串格式，因此需要序列化和反序列化对象。 - 在删除数据时，我们使用 removeItem 方法，并提供了相应的键名。

通过这种方式，前端应用可以有效地利用持久化存储来提升用户体验和应用性能。在选择 localStorage 或 sessionStorage 时，开发者应根据应用场景和数据保留的需要作出决定。

4. 状态持久化对用户体验的提升

4.1 状态持久化带来的用户体验优势

在现代Web应用中，状态持久化是提升用户体验的关键因素之一。状态持久化是指应用能够保存用户的状态信息，即使在浏览器刷新、关闭或系统重启之后，用户仍能够得到先前的操作体验，仿佛应用从未中断。这种特性对于提升用户满意度至关重要，接下来我们将深入分析状态持久化带来的用户体验优势。

4.1.1 无刷新数据保持

在传统的Web应用中，用户在进行操作时，一旦需要重新加载页面，所有的状态信息都会丢失。状态持久化技术让页面能够在无需重新加载的情况下保持数据的持续性。这意味着用户在与应用交互时，能够获得流畅的体验，因为他们不再需要反复地重新输入信息或重新导航到之前的位置。

4.1.2 快速页面加载与数据恢复

状态持久化使得应用在启动或页面刷新时能够快速加载用户之前的状态。这意味着用户不再需要等待应用从头开始加载和恢复到他们离开时的状态。快速的数据恢复功能，使得应用能够立即响应用户的操作请求，大大提高了应用的响应速度和整体性能。

4.2 实践案例：持久化用户界面状态

在Web应用中，保持用户界面状态的持久化对用户体验的提升尤为关键。下面将探讨常见的持久化用户界面状态的场景以及实施策略。

4.2.1 用户界面状态持久化的场景

用户界面状态持久化是指保存用户在应用中设置的各种偏好和配置，例如窗口大小、字体大小、颜色主题、导航栏位置等。这些状态信息能够让用户在任何时间点返回应用时，都能获得一种熟悉和个性化的体验。

4.2.2 实现用户界面状态持久化的策略

为了实现用户界面状态的持久化，开发者需要选择合适的存储技术并设计一种机制来监听状态的改变，并将这些改变保存到持久化存储中。同时，还需在应用启动或恢复时读取这些存储的数据，并将其反映在用户界面中。下面的示例代码演示了如何使用 localStorage 来实现简单的用户界面状态持久化。

// 使用TypeScript保存和读取用户界面状态
class UserInterfaceManager {
  private storageKey: string = 'userInterfaceState';

  saveState(interfaceState: any): void {
    // 将状态序列化后保存到localStorage
    localStorage.setItem(this.storageKey, JSON.stringify(interfaceState));
  }

  getState(): any {
    // 从localStorage中读取状态并反序列化
    const state = localStorage.getItem(this.storageKey);
    return state ? JSON.parse(state) : null;
  }
}

// 示例：保存当前界面状态
const uiManager = new UserInterfaceManager();
const currentState = { theme: 'dark', fontSize: '14px' };
uiManager.saveState(currentState);

// 示例：应用启动时恢复界面状态
const previousState = uiManager.getState();
if (previousState) {
  // 将恢复的状态应用到界面上
}

在上述代码中， saveState 方法使用 localStorage 来保存用户界面的状态，而 getState 方法则用于读取保存的状态。这种方法可以极大地提升用户在使用应用时的流畅度和满意度。

在本章节中，我们深入探讨了状态持久化对用户体验的提升，从理论和实践两个维度分析了它的重要性。下一章节将探讨适合持久化用户状态的应用场景。

5. 适合持久化用户状态的应用场景

在现代Web应用中，用户状态的持久化是提升用户体验的关键因素之一。用户状态包括但不限于用户设置、偏好、购物车内容以及其他重要信息。持久化这些状态不仅为用户提供了无缝的体验，还能够减少服务器的负载，并且在用户离线时依然可以使用部分功能。在本章节中，我们将深入探讨适合持久化用户状态的应用场景，并提供相应的实施策略。

5.1 用户设置和偏好存储

用户个性化设置和偏好的持久化是用户状态管理中非常常见的一种需求。它不仅能够提供个性化的用户体验，还可以增加用户对应用的粘性。

5.1.1 用户个性化设置的持久化

随着用户在应用中的交互逐渐深入，他们会设置一些个性化选项，如主题颜色、字体大小、语言偏好等。这些设置反映了用户的个性化需求，持久化这些设置可以帮助用户在重新访问应用时，能够获得相同或类似的应用环境，从而提升用户体验。

实施策略：

设计数据模型 ：首先，需要设计一种数据模型来存储用户设置。通常，这些数据可以存储在一个简单的键值对集合中，其中键是设置项，值是用户选择的值。
数据持久化 ：其次，需要将这些设置数据进行持久化。可以使用浏览器的 localStorage 、 sessionStorage ，或者在服务端存储，以便在用户重新访问网站时，能够加载和应用这些设置。
应用数据加载 ：最后，在应用启动时，需要从持久化存储中读取设置数据，并在用户界面中应用这些设置。

5.1.2 偏好设置的数据结构与存储方法

为偏好设置选择合适的数据结构和存储方法至关重要。通常，偏好设置的数据量较小，更新频率较低，因此适合使用轻量级的本地存储方案。

实施策略：

选择合适的存储方法 ：考虑到 localStorage 和 sessionStorage 都有存储限制，需要根据实际存储需求选择合适的存储方法。 localStorage 适用于长期存储，而 sessionStorage 适用于短期存储。
数据格式化 ：使用JSON格式来存储偏好设置是一种常见的做法，因为它易于读写，并且是轻量级的。
数据的读写操作 ：在应用中实现数据的读写操作时，可以使用浏览器提供的API。例如，在JavaScript中可以使用 localStorage.setItem('key', 'value') 来存储数据，使用 localStorage.getItem('key') 来读取数据。

// 保存用户设置到localStorage
function saveUserPreferences(preferences) {
    localStorage.setItem('userPreferences', JSON.stringify(preferences));
}

// 从localStorage加载用户设置
function loadUserPreferences() {
    const preferences = localStorage.getItem('userPreferences');
    return preferences ? JSON.parse(preferences) : {};
}

在上述代码中，我们定义了两个函数，一个用于保存用户设置，一个用于加载用户设置。使用 JSON.stringify 和 JSON.parse 来序列化和反序列化偏好设置数据。

5.2 电商购物车状态的持久化

购物车状态的持久化是电商类应用中一个重要的持久化场景。用户添加到购物车中的商品，即便是在用户关闭浏览器或者页面刷新后，也应该能够恢复。

5.2.1 购物车数据的持久化策略

考虑到购物车的复杂性和动态性，购物车数据的持久化需要考虑如何存储商品信息、数量、价格等。实现购物车数据的持久化，可以使用浏览器存储解决方案，也可以使用服务端存储方案。

实施策略：

商品信息模型设计 ：定义一个清晰的商品信息模型，包括商品ID、名称、价格、数量、图片等属性。
存储购物车数据 ：购物车数据可以存储为一个数组或者对象的形式。存储之前，可以通过序列化的方式将数据转换为字符串格式。
同步和更新机制 ：为了确保购物车数据的实时性和准确性，可以实现一个同步机制，在数据更新时即刻进行存储。

// 保存购物车到localStorage
function saveCart(cart) {
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 加载购物车数据
function loadCart() {
    const cart = localStorage.getItem('cart');
    return cart ? JSON.parse(cart) : [];
}

在以上代码中，我们展示了如何使用 localStorage 来存储和加载购物车数据。这只是一个简单的例子，实际应用中还需要考虑数据同步、异常处理、数据验证等更多问题。

5.2.2 数据一致性和异常处理

持久化购物车数据时，确保数据一致性是非常重要的。在数据更新、删除等操作时，需要采用适当的数据管理和错误处理机制来保证数据的准确性和稳定性。

实施策略：

事务处理 ：在进行数据操作时，采用事务处理机制可以确保数据的一致性。例如，当用户更新商品数量时，需要确保商品的数量既不会丢失也不会错误地改变。
异常处理 ：在进行数据操作时，应当加入异常处理机制，比如try-catch语句块，来捕获并处理可能出现的错误。
数据验证 ：在将数据写入持久化存储前，应进行数据验证，确保写入的数据是有效的。

try {
    // 尝试保存购物车数据
    saveCart(updatedCart);
} catch (error) {
    // 处理异常情况
    console.error('Error saving cart:', error);
}

在上面的代码段中，我们使用了try-catch语句块来处理可能出现的异常。如果保存购物车数据时出现错误，我们可以在catch块中捕获这个异常并进行处理。

5.3 离线应用的数据状态维护

随着Web应用的发展，对离线应用的支持变得越来越重要。这使得应用在没有网络连接的情况下也能提供基本的功能。在这种情况下，数据状态的维护至关重要。

5.3.1 离线应用数据持久化的必要性

为了保证应用的离线使用体验，需要在本地持久化数据状态，以便在没有网络连接时仍然能够访问和操作这些数据。

实施策略：

离线数据缓存 ：在设备本地进行数据缓存，并且在应用首次加载时同步缓存数据到远程服务器。
服务工作线程（Service Workers） ：使用Service Workers来拦截网络请求，并从缓存中提供数据，或在离线时提供默认数据。
数据同步机制 ：在设备重新连接到网络时，需要有一种机制来同步本地存储的数据与服务器上的数据。

5.3.2 设计离线状态同步机制

设计和实现一个有效的离线状态同步机制，需要考虑数据同步的策略、冲突解决以及错误处理。

实施策略：

变更跟踪 ：在本地数据库中跟踪数据变更记录，以便知道哪些数据需要同步。
冲突解决 ：当本地和服务器数据发生冲突时，应设计冲突解决策略，比如使用时间戳或版本号来决定哪个数据版本是最新的。
错误处理和重试机制 ：在网络同步数据时，应实现错误处理和重试机制，以确保数据最终一致性。

通过这些策略，我们可以确保用户即使在离线状态下也能够有良好的使用体验，并且在重新连接网络后，所有本地更改都能够可靠地同步到远程服务器上。

graph LR
    A[应用启动] --> B{网络是否可用}
    B -- 是 --> C[同步最新数据]
    B -- 否 --> D[使用本地数据]
    C --> E[应用正常运行]
    D --> E
    E --> F{是否连接到网络}
    F -- 是 --> G[执行数据同步]
    F -- 否 --> H[继续使用本地数据]
    G --> E
    H --> E

在上述mermaid流程图中，我们描述了一个典型的离线应用数据同步的流程，展示了应用如何根据网络状态来决定数据操作。

6. NgrxPersistState配置和使用步骤

在构建现代Web应用时，确保用户界面状态的持续性是一项挑战。Angular平台下的Ngrx库为状态管理提供了强大的解决方案。在Ngrx生态系统中，NgrxPersistState是一个流行的模块，它负责将应用状态持久化到浏览器的存储机制中。本章节将详细探讨如何安装和配置NgrxPersistState模块，以及如何设置持久化策略和状态的保存与加载。

6.1 安装和设置NgrxPersistState模块

6.1.1 NgrxPersistState模块的安装方法

要开始使用NgrxPersistState模块，您需要先安装它到您的Angular项目中。通过npm或yarn来安装所需的库是一个简单的步骤。

打开命令行工具。
进入您的项目根目录。
执行以下命令之一：

使用npm安装:

npm install @ngrx/persist-store

使用yarn安装:

yarn add @ngrx/persist-store

6.1.2 配置Ngrx模块和Persist实体

安装完成后，您需要在Ngrx模块中引入 StoreModule 和 PersistStoreModule 。同时，您也需要定义存储策略和持久化的状态实体。

首先，在您的应用的主模块文件（通常是 app.module.ts ）中，引入并配置这些模块：

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StorePersistModule, providePersist } from '@ngrx/persist-store';
import { reducers, State } from './reducers'; // 假设您的reducer和状态定义在这些文件中

@NgModule({
  declarations: [
    // 应用的组件和指令声明
  ],
  imports: [
    // 其他模块引入...
    StoreModule.forRoot(reducers, { metaReduction: false }),
    EffectsModule.forRoot([]),
    StorePersistModule,
    // 其他模块...
  ],
  providers: [
    providePersist({
      // 提供持久化选项
    })
  ]
})
export class AppModule { }

在 providePersist 中配置基本的持久化策略是关键步骤。例如，如果您想要存储所有状态，可以简单地指定如下：

import { Storage } from '@ngx-pwa/local-storage';
import { StorageArea } from '@ngx-pwa/local-storage';

export function localstorage(): StorageArea {
  return new Storage({ name: 'appData' });
}

@NgModule({
  providers: [
    {
      provide: Storage,
      useFactory: localstorage
    },
    providePersist({
      key: 'appState',
      storage: localstorage,
      serializer: {
        serialize: JSON.stringify,
        deserialize: JSON.parse
      },
    })
  ]
})
export class AppModule { }

在上面的代码中，我们定义了一个自定义的 localstorage 函数来使用 @ngx-pwa/local-storage 库，该库可以让我们更容易地使用浏览器的 localStorage 。然后在 providePersist 中指定了 key 、 storage 和 serializer 选项。

6.2 配置持久化策略

配置持久化策略涉及定义哪些状态需要被存储以及如何存储它们。这里我们将讨论自定义持久化键值映射以及持久化选项的高级配置。

6.2.1 自定义持久化键值映射

默认情况下，NgrxPersistState会存储整个状态树。但有时可能只需要持久化状态树的一部分。这时，您可以自定义存储策略，指定哪些状态需要持久化：

providePersist({
  key: 'appState',
  storage: localstorage,
  whitelist: ['user', 'cart'], // 白名单策略，只持久化user和cart状态
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  },
});

在上面的代码中， whitelist 属性定义了一个状态名称数组，只有这些状态会被持久化。

6.2.2 持久化选项的高级配置

NgrxPersistState还提供了一系列高级配置选项，以适应不同需求。例如， blacklist 、 sync 和 rehydrate 等。

使用 blacklist 可以排除不需要持久化的状态部分：

providePersist({
  blacklist: ['auth'], // 黑名单策略，排除auth状态
  // 其他配置...
});

如果您的应用需要同步状态到其他客户端，可以设置 sync 选项：

providePersist({
  sync: {
    strategy: (state: State) => {
      // 同步逻辑...
    }
  },
  // 其他配置...
});

rehydrate 选项允许您在应用启动时重新加载存储的状态：

providePersist({
  rehydrate: true,
  // 其他配置...
});

6.3 实现状态的保存和加载

状态持久化不仅包括保存状态，也涉及加载已保存的状态。我们接下来将探讨如何在应用启动时加载持久化状态，以及如何在状态变更时保存数据。

6.3.1 在应用启动时加载持久化状态

当您的应用启动时，您通常希望从持久化存储中恢复应用状态。NgrxPersistState通过 rehydrate 选项来实现这个功能。

如果 rehydrate 设置为 true ，状态将会在 Store 初始化时自动从持久化存储加载。如果您想要在特定的时间点加载状态，可以使用 load 操作：

import { load } from '@ngrx/store';
import { State } from './reducers';

this.store.dispatch(load({ state: {} as State }));

6.3.2 应用状态变更时保存数据

为了保持应用状态与持久化存储的同步，您需要在状态发生变化时保存数据。NgrxPersistState可以自动处理这些变更，但需要确保您的状态变化能够触发保存动作。

通常，您会在创建 actions 和 reducers 时处理这些。状态的保存应该作为状态变更流程的一部分。例如：

// 定义一个action
export const updateProfile = createAction(
  '[User Profile] Update Profile',
  props<{ pro*** }>()
);

// 更新状态的reducer
const userReducer = createReducer(
  initialState,
  on(updateProfile, (state, { profile }) => ({
    ...state,
    profile,
  }))
);

// 配置Ngrx模块时，确保您的状态变更能够触发持久化操作
// 这通常在action触发reducer后通过Ngrx的机制自动完成

通过上述的配置和代码逻辑，您已经能够让Ngrx应用的状态持久化到浏览器存储中，并在应用启动时加载这些状态。

以上，我们已经探讨了NgrxPersistState的安装和配置过程，以及如何配置持久化策略和实现状态的保存和加载。接下来的章节我们将深入探讨Ngrx状态管理中的异常处理机制以及如何保证持久化存储的健壮性。