add ngrx store and effect

UI/src/app/app.config.ts

@@ -19,6 +19,7 @@ export const appConfig: ApplicationConfig = {
     provideStore({
         myStaffs: staffsReducer,
     }),
+    provideEffects([staffEffects]),
     provideStoreDevtools({
         maxAge: 25,
         logOnly: !isDevMode()
@@ -39,7 +40,7 @@ export const appConfig: ApplicationConfig = {
             }
         }
     }),
-    provideEffects([staffEffects])
+    
 ]
 };
 

UI/src/app/staff/staff.component.html

@@ -29,7 +29,7 @@
 </div>
 <div>
   <!--[value]="userList"-->
-  <p-table [value]="users" sortMode="multiple"  
+  <p-table [value]="users()" sortMode="multiple"  
       class="p-datatable-sm" [loading]="loading">
       <ng-template pTemplate="header">
         <tr>       

UI/src/app/staff/staff.component.ts

@@ -14,7 +14,7 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
-import { selectStaffLoaded,selectState } from '../state/staff.selectors';
+import { selectStaffLoaded,selectStaff } from '../state/staff.selectors';
 
 @Component({
   selector: 'staff-list',
@@ -31,9 +31,8 @@ export class StaffComponent implements OnInit, OnDestroy{
   lastname = '';
   loading = false;
   userList:StaffView[] = [];
-  appState = this.store.selectSignal(selectState);
-  users = this.appState().staffs;
-  staffloadyet = this.appState().staffloaded;
+  users = this.store.selectSignal(selectStaff);
+  staffloadyet = this.store.selectSignal(selectStaffLoaded)
   private cd = inject(ChangeDetectorRef);
   msg ="[Staff component]";
  
@@ -101,8 +100,12 @@ export class StaffComponent implements OnInit, OnDestroy{
      
       const criteria = this.getSearchCiteria();
        this.staffService.searchCriteria = criteria;
-       console.log("search function store staffload yet",this.staffloadyet, this.users);
-      if (this.staffloadyet != true) {
+       console.log("search function store staffload yet",this.staffloadyet(), this.users);
+       if (this.staffloadyet() != true) {
+        this.store.dispatch(StaffsActions.loadStaff({criteria}));
+       }
+      /*
+      if (this.staffloadyet() != true) {
           this.loading = true;
           const loadStaff$ =  this.staffService.searchStaffs(criteria);
           this.subscription.add(
@@ -124,6 +127,7 @@ export class StaffComponent implements OnInit, OnDestroy{
           }) 
         );
       }
+      */
    }
   }
   newUser():void {

UI/src/app/state/staff.effects.ts

@@ -10,6 +10,12 @@ import { StaffsActions, StaffsApiActions } from './staff.actions';
 import { StaffService } from '../staff/staff.service';
 import { StaffSearch } from '../models';
 
+/* how to use this load and put in store. then use selector to get slide of entity
+   
+   this.store.dispatch(StaffsApiActions.loadStaff());
+  then using 
+  selector to get from store
+*/
 @Injectable()
 export class staffEffects {
   private actions$: Actions = inject(Actions);