Angular State Management (Temel Seviye)

Angular ile state management hakkında basit düzeyde makale yazıyorum. Makaleye başlamadan önce şunu belirtmeliyim ki burada vereceğim örnek simple page bir proje için geçerlidir. Kompleks app leri için Redux, Ngxs gibi durum yönetimlerini inceleyebilirsiniz.

Uygulayacağımız senaryo şu şekilde olacak. Web sitemizde 2 adet ilk ve ikinci adlarından olmak üzere component ve bir adet “todo” isminde servisimiz olacak. Bir adet de para birimlerini listelemek için dropdown ekledim.

ng g s todo

ile todoService oluşturuyoruz. Sırası ile ile

ng g c ilk
ng g c ikinci

isminde iki adet component oluşturduk.

Web sitemiz açılışında para birimi default olarak “TL” gelecek ve bir adet de “Dolar” ekledik. Angularda default olarak gelen appComponent’de seçtiğimiz Dolar kuru aynı anda ilk ve ikinci componentlere de yansıyacak.

bunun için bir “setCurrency” isminde service’e bir adet method ekledim.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TodoService {

  constructor(private httpClient: HttpClient) { }
  currentCurrency = new BehaviorSubject("TL");
  setCurrency(value: any) {
    this.currentCurrency.next(value);
  }
}

şimdi appComponent’imizi oluşturalım

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TodoService } from './todo-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  search = new FormControl("");
  currency: String[] = ["TL", "Dolar"];
  selectCurrency = new FormControl("TL");

  constructor(private todoService: TodoService) {

  }

  ngOnInit(): void {

    this.selectCurrency.valueChanges.subscribe(data => {
      this.todoService.setCurrency(data);
      console.log(data);
    })

  }
  title = 'UmdemyRxJSProject';
}

ve appComponet tarafından beslenen app.component html sayfamızı oluşturalım.

<input type="text" [formControl]="search">
<select [formControl]="selectCurrency">
  <option *ngFor="let item of currency" [value]="item">{{item}}</option>
</select>
<hr>
<div style="width: 500px;height: 500px; background-color: antiquewhite;margin: 10px;padding: 10px;float: left;">
  <app-ilk></app-ilk>
</div>
<div style="width: 500px;height: 500px; background-color: antiquewhite;margin: 10px;padding: 10px;float: left;">
  <app-ikinci></app-ikinci>
</div>


<router-outlet></router-outlet>

şimdi ilkcomponent’imizi oluşturuyoruz. İlk olarak app html de seçtiğimiz bir değer todoService aracılığı ile değeri ilkComponent’de yakaladım. Bunun için mycurrency isminde bir değişken oluşturduk ve service’den gelen değeri buraya aktardık.

import { Component, OnInit } from '@angular/core';
import { TodoService } from '../todo-service.service';

@Component({
  selector: 'app-ilk',
  templateUrl: './ilk.component.html',
  styleUrls: ['./ilk.component.css']
})
export class IlkComponent implements OnInit {
  mycurrency!: string;
  constructor(private todoService: TodoService) { }

  ngOnInit(): void {
    this.todoService.currentCurrency.subscribe(data => { this.mycurrency = data; }
    )
  }

}

şimdi html tarafında aşağıdakini yazalım ve ilkcomponent için geliştirmemiz burada son buldu. Burada service yöntemi ile dolar kurunu değişime göre yakalayabilir ve istediğimiz işlemleri yapabilir.

<p>ilk works!</p>
Güncel Para Birimi {{mycurrency}}

şimdi ikincicomponent ile appcomponent’den gelen datayı yakalayalım. burada .ts klasörümüzde hiçbir işlem yapmıcaz sadece html’de pipe ile bu datayı yakalıcaz.

<p>ikinci works!</p>
Güncel para birimi {{todoService.currentCurrency | async}}

uygulamamızın ekran görüntüsünü aşağıda paylaşıyorum. ikincicomponent service göre daha kullanışlı olarak görülmektedir. Tabi ihtiyacımıza göre istediğimizi kullanabiliriz. Burada “biri diğerine göre iyidir” olarak bakmak yanlıştır. Projemizde ihtiyacımız neyse en iyi teknik odur.

Makalemin başlığında da belirttiğim gibi bu yöntemle basit düzeyde bir Angular da State Management işlemi yaptık. Projeniz basit düzeyde ise, örneklerde gösterdiğim bir yöntemi kullanabilirsiniz. Büyük projelerde kullanmanız sağlıklı olmaz, büyük projelerde makalenin başında verdiğim yöntemleri uygulayabilirsiniz.

Faydalı olması dileği ile….