මොඩියුලය 10: State Management & Signals

State (තත්ත්වය) යනු යම් මොහොතක යෙදුමේ පවතින දත්තයි. උදාහරණයක් ලෙස, ලොග් වූ පරිශීලකයාගේ තොරතුරු, shopping cart එකේ ඇති භාණ්ඩ, තෝරාගත් theme එක (dark/light) යනාදිය යෙදුමේ state එකට අයත් වේ.

State Management යනු මෙම දත්ත මධ්‍යගත, සංවිධානාත්මක සහ පුරෝකථනය කළ හැකි (predictable) ආකාරයකට කළමනාකරණය කිරීමේ ක්‍රියාවලියයි.

එය අවශ්‍ය වන්නේ ඇයි?

කුඩා යෙදුම්වලදී, services හරහා components අතර දත්ත බෙදාගැනීම ප්‍රමාණවත් වේ. නමුත් යෙදුම විශාල වන විට, විවිධ components එකම දත්ත මත රඳා පැවතීම සහ ඒවා වෙනස් කිරීම නිසා දත්ත ප්‍රවාහය (data flow) අවුල් සහගත විය හැක ("spaghetti code").

State Management මගින්:

• Single Source of Truth: යෙදුමේ සම්පූර්ණ state එක එකම මධ්‍යගත ස්ථානයක (store) තබා ගනී.
• Predictable State Changes: State එක වෙනස් කළ හැක්කේ නිශ්චිතව අර්ථ දක්වන ලද actions හරහා පමණි.
• Traceability: යෙදුමේ state එක වෙනස් වූයේ කෙසේද, කවදාද යන්න පහසුවෙන් සොයාගත හැක (debugging සඳහා ඉතා වැදගත්).

NgRx සහ NGXS යනු Angular සඳහා ඇති ජනප්‍රිය state management libraries වේ. ඒවා Redux රටාව (pattern) මත පදනම් වී ඇත.

Angular v16 සමඟ හඳුන්වා දුන් Signals යනු යෙදුමේ state එක කළමනාකරණය කිරීමට සහ දත්ත වෙනස්වීම් වලට ප්‍රතිචාර දැක්වීමට ඇති නව, සරල සහ කාර්යක්ෂම ක්‍රමයකි. இது RxJS Observables වලට වඩා සරල විකල්පයක් ලෙස සැලකිය හැක.

Signal එකක් යනු කුමක්ද?

Signal එකක් යනු අගයක් දරා සිටින wrapper එකකි. එම අගය වෙනස් වන විට, එම signal එක මත රඳා පවතින සියලුම දේට ස්වයංක්‍රීයව දැනුම් දෙයි (reactive).

ප්‍රධාන Signals API:

• signal(): නව writable signal එකක් නිර්මාණය කරයි.
• computed(): වෙනත් signals එකක් හෝ කිහිපයක් මත පදනම්ව නව read-only signal එකක් නිර්මාණය කරයි.
• effect(): Signal එකක අගය වෙනස් වන විට යම් කේතයක් (side effect) ක්‍රියාත්මක කරයි.

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Count: {{ count() }}</h2>
    <h3>Double Count: {{ doubleCount() }}</h3>
    
    <button (click)="increment()">Increment</button>
    <button (click)="reset()">Reset</button>
  `
})
export class CounterComponent {
  // 1. Create a writable signal
  count = signal(0);

  // 2. Create a computed signal based on 'count'
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // 3. Create an effect that runs when 'count' changes
    effect(() => {
      console.log(`The current count is: ${this.count()}`);
    });
  }

  increment() {
    // To change the value, use .set() or .update()
    this.count.update(currentValue => currentValue + 1);
  }

  reset() {
    this.count.set(0);
  }
}

Signals භාවිතයෙන්, Angular හට change detection ක්‍රියාවලිය වඩාත් කාර්යක්ෂමව සිදු කළ හැක. මන්ද, කුමන component එක යාවත්කාලීන කළ යුතුද යන්න Angular හරියටම දන්නා බැවිනි.