Angular holatni boshqarish

State boshqaruvi (state management) ma’lumotlarning vaqt o‘tishi bilan qanday o‘zgarishini tartibga soladi.

State boshqaruvi asoslari

Mahalliy birinchi: component signallari bilan boshlang; faqat baham ko‘rish kerak bo‘lganda xizmatga (do‘konga) targ‘ib qilish.
Signallar: Mahalliy va xizmat ko‘rsatuvchi holat uchun signal() dan foydalaning; computed() yordamida hosil qiling.
Interop: RxJS-dan faqat oqim semantikasi zarur bo‘lganda foydalaning; global holatni minimal darajada saqlang.

import { Injectable, signal, computed, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  double = computed(() => this.count() * 2);
  inc() { this.count.update(n => n + 1); }
}

// Component: const store = inject(CounterStore);

Eslatmalar:

Tegishli: Signallar, xizmatlar va o‘zgarishlarni aniqlashga qarang.
Oddiy xizmat + signallari bilan boshlang; Murakkablik talab qilgandagina kutubxonalarga murojaat qiling.

Servisga asoslangan signallar (Store)

componentlar bo‘ylab almashish uchun holatni xizmatga ko‘taring.

Qayta foydalanishni yaxshilaydi.

import { Injectable, signal, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  inc() { this.count.update(n => n + 1); }
}

// Component usage
class App { store = inject(CounterStore); }

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Injectable, signal, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  inc() { this.count.update(n => n + 1); }
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Service with Signals</h3>
    <p>Count: {{ store.count() }}</p>
    <button (click)="store.inc()">Increment</button>
  `
})
class App { store = inject(CounterStore); }

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

CounterStore : signal va yangilash usuliga ega bo‘lgan xizmat (inc() ).
inject(CounterStore): Komponentdagi do‘konni oladi (konstruktor kerak emas).
store.count(): Shablondagi joriy qiymatni o‘qing; tugmani bosish store.inc() ni chaqiradi.

Dizayn bo‘yicha maslahatlar:

Xizmatda har bir xususiyat uchun yagona haqiqat manbasini saqlang; kerak bo‘lganda in’ektsiya qiling.
Yangilanish usullarini ko‘rsatish; to‘g‘ridan-to‘g‘ri komponentlardan mutatsiyaga uchragan holatni olish.
Hisoblangan signallar bilan qiymatlarni chiqarish; xizmatda yon ta’sirlarni (masalan, qat’iylik) saqlang.
Oqimlarga faqat kerak bo‘lganda ko‘prik (masalan, RxJS asosidagi API bilan o‘zaro ishlash uchun).

Lokal va global state

Ulanishni kamaytirish uchun ko‘pchilik shtatlarni komponentlarga mahalliy qilib qo‘ying.
Bir nechta funksiya kerak bo‘lgandagina umumiy xizmatga o‘ting.
Izolyatsiya zarur bo‘lganda xususiyat/marshrut darajasida ko‘lamli provayderlar.

import { provideRouter, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: Home, providers: [CounterStore] }
];

bootstrapApplication(App, { providers: [provideRouter(routes)] });

Ko‘rsatmalar:

Bir nechta marshrut/komponentga bir xil ma’lumot kerak bo‘lganda yoki keshlash UXni yaxshilaganda holatni targ‘ib qiling.
UI holatini (filtrlar, dialoglar) server/kesh holatidan ajratish; ularni mustaqil boshqarish.
State’ni birinchi foydalanishda kechiktirib (lazy) ishga tushiring va tiklash (reset) nuqtalarini ko‘zda tuting (masalan, tizimdan chiqishda).

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish