如何在angular中编写简单的ngrx代码来显示对象并将其添加到对象数组中

在Angular中编写简单的NgRx代码来显示对象并将其添加到对象数组中，可以按照以下步骤进行：

步骤1：安装必要的依赖首先，确保已经安装了必要的依赖。在Angular项目的根目录下，打开终端并运行以下命令：

npm install @ngrx/store
npm install @ngrx/effects

步骤2：创建状态(State) 在NgRx中，状态是存储应用程序数据的地方。在你的Angular项目中，创建一个新的文件夹（例如store），然后在该文件夹中创建一个新的文件（例如app.state.ts），并添加以下代码：

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

export interface AppState {
  objects: Object[];
}

export const initialState: AppState = {
  objects: []
};

export enum ObjectActionTypes {
  AddObject = '[Object] Add',
}

export class AddObject implements Action {
  readonly type = ObjectActionTypes.AddObject;

  constructor(public payload: Object) {}
}

export type ObjectActions = AddObject;

在上面的代码中，我们定义了一个AppState接口来表示应用程序的状态，其中包含一个objects数组。我们还定义了一个initialState常量来初始化状态。然后，我们定义了一个ObjectActionTypes枚举来表示操作类型，并创建了一个AddObject类来表示添加对象的操作。

步骤3：创建Reducer Reducer是一个纯函数，用于处理状态的变化。在store文件夹中创建一个新的文件（例如object.reducer.ts），并添加以下代码：

import { ObjectActionTypes, ObjectActions } from './app.state';

export function objectReducer(state = initialState, action: ObjectActions): AppState {
  switch (action.type) {
    case ObjectActionTypes.AddObject:
      return {
        ...state,
        objects: [...state.objects, action.payload]
      };
    default:
      return state;
  }
}

在上面的代码中，我们创建了一个objectReducer函数，它接收当前状态和操作作为参数，并根据操作类型来更新状态。在这种情况下，当操作类型为AddObject时，我们将新对象添加到objects数组中。

步骤4：创建Effects（可选） Effects用于处理副作用，例如异步操作。如果你的应用程序需要进行异步操作，可以创建一个Effects来处理它们。在store文件夹中创建一个新的文件（例如object.effects.ts），并添加以下代码：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs/operators';
import { AddObject, ObjectActionTypes } from './app.state';

@Injectable()
export class ObjectEffects {
  addObject$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ObjectActionTypes.AddObject),
      map((action: AddObject) => {
        // 处理异步操作，例如向服务器发送请求
        // 在这个例子中，我们只返回一个新的AddObject操作
        return new AddObject(action.payload);
      })
    )
  );

  constructor(private actions$: Actions) {}
}

在上面的代码中，我们创建了一个ObjectEffects类，并定义了一个addObject$属性，它使用createEffect函数来处理AddObject操作。在这个例子中，我们只是简单地返回一个新的AddObject操作，但你可以在这里处理实际的异步操作。

步骤5：在模块中配置Store和Effects 在你的Angular模块中，导入StoreModule和EffectsModule，并在imports数组中配置它们。例如，在app.module.ts中添加以下代码：

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { objectReducer } from './store/object.reducer';
import { ObjectEffects } from './store/object.effects';

@NgModule({
  imports: [
    StoreModule.forRoot({ objects: objectReducer }),
    EffectsModule.forRoot([ObjectEffects])
  ],
  // ...
})
export class AppModule { }

在上面的代码中，我们使用StoreModule.forRoot来配置状态和Reducer，并使用EffectsModule.forRoot来配置Effects。

步骤6：在组件中使用Store 现在，你可以在你的组件中使用Store来访问状态并分发操作。在你的组件文件中，导入Store，并在构造函数中注入它。然后，你可以使用select方法来选择状态，并使用dispatch方法来分发操作。以下是一个简单的示例：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState, AddObject } from './store/app.state';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let object of objects$ | async">
      {{ object.name }}
    </div>
    <button (click)="addObject()">Add Object</button>
  `
})
export class AppComponent {
  objects$: Observable<Object[]>;

  constructor(private store: Store<AppState>) {
    this.objects$ = this.store.select(state => state.objects);
  }

  addObject() {
    const newObject: Object = { name: 'New Object' };
    this.store.dispatch(new AddObject(newObject));
  }
}

在上面的代码中，我们使用store.select方法选择objects数组，并将其赋值给objects$属性。然后，在addObject方法中，我们创建一个新的对象，并使用store.dispatch方法分发AddObject操作。

这样，当你运行应用程序时，它将显示objects数组中的对象，并且当你点击"Add Object"按钮时，它将添加一个新的对象到objects数组中。

希望这个示例能帮助你理解如何在Angular中编写简单的NgRx代码来显示对象并将其添加到对象数组中。如果你想了解更多关于NgRx的信息，可以参考腾讯云的相关文档和产品介绍：