从 ngrxStore 中的存储读取数据 - Javascript

简介

ngrxStore 是一个 JavaScript 应用程序状态管理库，它是 Angular 框架的一部分。它提供了一种可预测的状态管理，让开发者可以更好地管理应用程序的状态。在使用 ngrxStore 时，你需要从存储中读取数据，然后在应用程序中使用这些数据。

本文将介绍如何从 ngrxStore 中的存储读取数据，并提供一些示例代码。

步骤

第一步：导入 Store

要从 ngrxStore 中的存储读取数据，您需要导入 Store。Store 是一个对象，它存储所有的应用程序状态，并提供了一些方法来管理和更新状态。

import { Store } from '@ngrx/store';

第二步：注入 Store

您需要在组件中注入 Store，使用它来访问存储中的数据。

constructor(private store: Store) { }

第三步：使用 select 方法

在您的组件中，您可以使用 store 的 select 方法来选择存储中的状态，并订阅状态的值。

this.store.select(state => state.yourStateName).subscribe((yourStateName) => {
  // perform actions with your state
});

在上面的代码中，yourStateName 是从存储中选择的状态名称。这将订阅所选状态的值，并通过回调函数操作该值。你可以根据自己的需要指定自己的状态名称。

示例

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>{{ message }}</h2>
    </div>
  `,
})
export class AppComponent {
  public message: string;

  constructor(private store: Store) {
    this.store.select(state => state.message).subscribe((message: string) => {
      this.message = message;
    });
  }
}

在上面的代码中，我们使用 Store 选择了名为 message 的状态。我们在订阅中获取了 message 的值，并将其赋值给组件中的变量。在组件模板中，我们使用了这个变量来显示信息。

结论

在这篇文章中，我们学习了如何从 ngrxStore 中的存储中读取数据。我们需要导入 Store 并注入它，然后使用选择方法来选择所需的状态。在订阅中我们获取了状态的值，并对它进行操作。

以上皆为示例代码，你可以在你的应用程序中根据自己的需求修改它。