在angular 2应用程序中使用ngrx/store优于reduxjs的功能和优势

npm install @ngrx/store

// actions.ts
import { createAction, props } from '@ngrx/store';

export const updateItem = createAction(
  '[Item] Update',
  props<{ id: number; name: string }>()
);

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import { updateItem } from './actions';

export interface Item {
  id: number;
  name: string;
}

export interface AppState {
  items: Item[];
}

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

export const itemReducer = createReducer(
  initialState,
  on(updateItem, (state, { id, name }) => {
    const updatedItems = state.items.map(item => {
      if (item.id === id) {
        return { ...item, name };
      }
      return item;
    });
    return { ...state, items: updatedItems };
  })
);

// app.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { updateItem } from './actions';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="updateItem()">Update Item</button>
  `
})
export class AppComponent {
  constructor(private store: Store) {}

  updateItem() {
    const id = 1;
    const name = 'Updated Item';
    this.store.dispatch(updateItem({ id, name }));
  }
}