Как я мог использовать библиотеку NGXS в этом скрипте ANGULAR

Question

Я младший, использую Angular Мне удалось научиться использовать материал, и теперь я хотел бы узнать больше о NGXS для управления состоянием моего Angular приложения. Мое приложение для управления библиотекой (функции: добавить книгу, удалить книгу, редактировать книгу) уже работает "отлично". Я просто хотел бы использовать NGXS. К сожалению, я не понимаю, как и в каком аспекте он улучшает мой код.

Это мой код:

import { Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface PeriodicElement {
  name: string;
  id: number;
  writer: string;
  date: string;
}

@Component({
  selector: 'app-book-table',
  templateUrl: './book-table.component.html',
  styleUrls: ['./book-table.component.scss']
})
export class BookTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'writer', 'date'];
  fieldName = {'name': "Book Name", 'writer': "Writer Name", 'date': "Date", 'id': "ID", 'action': "Action"}
  columnsToDisplay: string[] = ['id', 'name', 'writer', 'date', 'action'];

  data: PeriodicElement[]; 

  item: PeriodicElement;

  // add new book function
  addBook() {
    console.log("This is add new test")
    this.openNewDialog()
  }

  // edit function
  edit(element){
    console.log("this is edit test:",element);
    this.openEditDialog(element)
  }

  // delete function
  delete(element){
    console.log("this is delete test:",element);
    this.openDeleteDialog(element)
  }

  //open add new dialog
  openNewDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px', //dialog width
      data: {}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.item ={id:result.id, name:result.name, writer:result.writer, date:result.date} 
      //add new book data
      this.data.push(this.item);
      //save on local storage
      localStorage.setItem('data', JSON.stringify(this.data))
      location.reload();
    });
  }

  //open delete Dialog
  openDeleteDialog(data):void {
    const dialogRef = this.dialog.open(DeleteDialog, {
      width: '400px',
      data: {id: data.id, name: data.name, writer: data.writer, date: data.date}
    });

    dialogRef.afterClosed().subscribe(result => {
      for(let i = 0; i < this.data.length; i++){
        //check selected data
        if(this.data[i].id == result.id &&
          this.data[i].name == result.name &&
          this.data[i].writer == result.writer &&
          this.data[i].date == result.date ){
            //delete item
            this.data.splice(i, 1);
            //save data on localstorage
            localStorage.setItem('data', JSON.stringify(this.data))
            location.reload();
          }
      }

    });
  }

  //open edit dialog
  openEditDialog(data): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {id: data.id, name: data.name, writer: data.writer, date: data.date}
    });

    dialogRef.afterClosed().subscribe(result => {
      for(let i = 0; i < this.data.length; i++){
        //check editing data
        if(this.data[i].id == data.id &&
          this.data[i].name == data.name &&
          this.data[i].writer == data.writer &&
          this.data[i].date == data.date ){
            //update current data
            this.data[i] = {id:result.id, name:result.name, writer:result.writer, date:result.date} 
            // save data on localstorage
            localStorage.setItem('data', JSON.stringify(this.data))
            location.reload();
          }
      }
    });
  }


  constructor(public dialog: MatDialog) { }

  ngOnInit() {
    // initial value
    if(!localStorage.getItem("data")){
      this.data = [{id: 1, name: 'Hydrogen', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 2, name: 'Helium', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 3, name: 'Lithium', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 4, name: 'Beryllium', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 5, name: 'Boron', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 6, name: 'Carbon', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 7, name: 'Nitrogen', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 8, name: 'Oxygen', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 9, name: 'Fluorine', writer: 'Hiney Stone', date: '2020.4.20'},
      {id: 10, name: 'Neon', writer: 'Hiney Stone', date: '2020.4.20'},]
      localStorage.setItem('data', JSON.stringify(this.data))
    }
    else{
      this.data = JSON.parse(localStorage.getItem("data")) 
    }
  }


}

Спасибо за вашу помощь