angular ngrx_Angular 10 ngrx示例存储

angular ngrx

In this tutorial, we’ll learn how to use NgRX store in our Angular 10 example application. We’ll see how we can create actions, reducers, and dispatch actions.

在本教程中，我们将学习如何在Angular 10示例应用程序中使用NgRX存储。 我们将看到如何创建动作，缩减器和调度动作。

The Angular NgRx store is a client-side data management pattern that implements the Redux pattern, invented by Facebook, using RxJS observables.

Angular NgRx存储是一种客户端数据管理模式，该模式使用RxJS observables实现由Facebook发明的Redux模式。

As a prerequisite, you need to have Node.js and Angular CLI installed on your local development machine,

前提条件是，您需要在本地开发计算机上安装Node.js和Angular CLI，

Angular 10 NgRx存储示例 (Angular 10 NgRx Store by Example)

Open a new command-line interface and run the following commands:

打开一个新的命令行界面并运行以下命令：

$ ng new angular10ngrx
$ cd angular10ngrx

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

CLI会问您几个问题- 是否要添加Angular路由？ 键入y作为“是”， 您想使用哪种样式表格式？ 选择CSS 。

Next, create a new Angular component using the following command:

接下来，使用以下命令创建一个新的Angular组件：

$ ng g c product

Next, a file inside the src/app/product folder with the product.model.ts name as follows:

接下来，在src/app/product文件夹中的文件具有product.model.ts名称，如下所示：

export interface Product {
  name: string;
  price: number;
}

安装NgRx库 (Installing NgRx Libraries)

Next, run the following command to install ngrx from npm in your project as follows:

接下来，运行以下命令以从项目中的npm安装ngrx ，如下所示：

$ npm install @ngrx/core
$ npm install @ngrx/store
$ npm install @ngrx/effects

创建一个NgRx减速器 (Creating an NgRx Reducer)

Create a src/app/reducers folder and a file named product.reducer.ts with the following code:

使用以下代码创建一个src/app/reducers文件夹和一个名为product.reducer.ts的文件：

// product.reducer.tsimport { Product } from './../product/product.model';
import { Action } from '@ngrx/store';export const ADD_PRODUCT = 'ADD_PRODUCT';export function addProductReducer(state: Product[] = [], action) {
  switch (action.type) {
    case ADD_PRODUCT:
        return [...state, action.payload];
    default:
        return state;
    }
}

配置NgRx存储 (Configuring the NgRx Store)

Next, open the src/app/app.module.ts file and update it as follows:

接下来，打开src/app/app.module.ts文件并如下更新：

// app.module.tsimport { StoreModule } from '@ngrx/store';
import { addProductReducer } from './reducers/product.reducer'; imports: [
    BrowserModule,
    StoreModule.forRoot({product: addProductReducer})
],

We simply pass our reducer to the store. We can update our application state by dispatching the actions to the store.

我们只是将减速器传递给商店。 我们可以通过将操作调度到商店来更新我们的应用程序状态。

Next, open the src/app/product/product.component.ts file and update it as follows:

接下来，打开src/app/product/product.component.ts文件并按如下所示进行更新：

// src/app/product/product.component.tsimport { Product } from './product.model';
import { AppState } from './../app.state';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {  products: Observable<Product[]>;  constructor(private store: Store<AppState>) {
    this.products = this.store.select(state => state.product);
   }  addProduct(name, price) {
    this.store.dispatch({
      type: 'ADD_PRODUCT',
      payload: <Product> {
        name: name,
        price: price
      }
    });
  }  ngOnInit() {
  }}

We first subscribe to the store and fetch the products, next we add an action for adding a product to the store.

我们首先订阅商店并获取产品，接下来我们添加一个将产品添加到商店的操作。

Next, create a src/app/app.state.ts file and add the following code:

接下来，创建一个src/app/app.state.ts文件并添加以下代码：

// src/app/app.state.tsimport { Product } from './product/product.model';export interface AppState {
  readonly product: Product[];
}

调度NgRx操作 (Displatching the NgRx Action(s))

Next, open the src/app/product/product.component.html file and update it as follows:

接下来，打开src/app/product/product.component.html文件并按如下所示进行更新：

<div class="panel panel-primary">
    <div class="panel-body">
      <form>
        <div class="form-group">
          <label class="col-md-4">Product Name</label>
          <input type="text" class="form-control" #productName/>
        </div>
        <div class="form-group">
          <label class="col-md-4">Product Price</label>
          <input type="text" class="form-control" #productPrice />
          </div>
          <div class="form-group">
            <button (click) = "addProduct(productName.value, productPrice.value)" class="btn btn-primary">Add Product</button>
          </div>
      </form>
    </div>
  </div><table class="table table-hover" *ngIf="products != 0">
  <thead>
  <tr>
      <td>Product Name</td>
      <td>Product Price</td>
  </tr>
  </thead>
  <tbody>
      <tr *ngFor="let product of products | async">
          <td></td>
          <td></td>
      </tr>
  </tbody>
  </table>

We first create a form to create a new product by dispatching the corresponding action to the store and then we create a table to display the products we have created in the store. The products variable is an observable so we use the async pipe to subscribe to it.

我们首先创建一个表单，通过将相应的操作分配给商店来创建新产品，然后创建一个表来显示我们在商店中创建的产品。 products变量是可观察的，因此我们使用async 管道进行订阅 。

We use Bootstrap 4 to add styles to our app. Read how you can add Bootstrap to your Angular 10 app.

我们使用Bootstrap 4向我们的应用添加样式。 阅读如何将Bootstrap添加到Angular 10应用程序 。

You can serve your application using the following command:

您可以使用以下命令为您的应用程序提供服务：

$ ng serve --open

结论 (Conclusion)

In this quick example, we learned how to use ngrx store in our Angular 10 example application. We’ve seen how we can dispatch actions, and create reducers.

在这个快速示例中，我们学习了如何在Angular 10示例应用程序中使用ngrx存储。 我们已经了解了如何调度动作并创建减速器。

This article was originally posted on Techiediaries.

本文最初发布在Techiediaries上 。

翻译自: https://levelup.gitconnected.com/angular-10-ngrx-store-by-example-afec6929bbf9

angular ngrx