// Local state trong component
@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">+</button>
    <span>{{ count }}</span>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  protected count = 0;
  increment(): void { this.count++; }
  decrement(): void { this.count--; }
}

// Global state qua service
@Injectable({ providedIn: 'root' })
export class CounterService {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();

  increment(): void {
    this.countSubject.next(this.countSubject.value + 1);
  }
  decrement(): void {
    this.countSubject.next(this.countSubject.value - 1);
  }
}

import { signal } from '@angular/core';

const count = signal(0);
console.log(count());  // 0
count.set(1);
console.log(count());  // 1

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">+</button>
    <p>{{ count() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  increment(): void {
    this.count.update(c => c + 1);
  }
}

// 1. Cài đặt
ng add @ngrx/store @ngrx/effects

// 2. Action
export const addItem = createAction('[Cart] Add', props<{ id: number }>());

// 3. Reducer
export const cartReducer = createReducer(
  { items: [] },
  on(addItem, (state, { id }) => ({ ...state, items: [...state.items, id] }))
);

// 4. Đăng ký Store
StoreModule.forRoot({ cart: cartReducer })

// 5. Sử dụng trong component
this.store.dispatch(addItem({ id: 1 }));
this.store.select(selectCartState).subscribe(data => { /* ... */ });

@Injectable({ providedIn: 'root' })
export class CounterService {
  private count = new BehaviorSubject(0);
  count$ = this.count.asObservable();

  increment(): void {
    this.count.next(this.count.value + 1);
  }
}