Cara Mengambil ngrx State dari Penyimpanan Lokal dengan Benar

 

NgRx adalah sebuah perpustakaan yang populer untuk mengelola state aplikasi dalam Angular menggunakan arsitektur Redux. Salah satu keunggulan dari NgRx adalah kemampuannya untuk menyimpan state aplikasi di penyimpanan lokal (local storage) agar dapat dipertahankan bahkan setelah pengguna merefresh halaman.

Untuk mengambil ngrx state dari penyimpanan lokal dengan benar, Anda dapat mengikuti langkah-langkah berikut:

Menyimpan State ke Penyimpanan Lokal:

Sebelum dapat mengambil state dari penyimpanan lokal, Anda harus memastikan bahwa state telah disimpan dengan benar ke dalam penyimpanan lokal. Anda dapat melakukannya dengan menggunakan NgRx Effect yang berfungsi untuk menyimpan state ke penyimpanan lokal setiap kali terjadi perubahan pada state. Berikut adalah contoh penggunaan NgRx Effect untuk menyimpan state:

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

import { Actions, createEffect, ofType } from '@ngrx/effects';

import { tap } from 'rxjs/operators';

import { Store } from '@ngrx/store';

import { AppState } from './app.state';

@Injectable()

export class AppEffects {

  constructor(private actions$: Actions, private store: Store<AppState>) {}

  saveStateToLocalStorage$ = createEffect(

    () =>

      this.actions$.pipe(

        ofType(/* actions yang mempengaruhi state */),

        tap(() => {

          this.store

            .select(state => state) // Mengambil seluruh state

            .subscribe(state => {

              localStorage.setItem('appState', JSON.stringify(state));

            });

        })

      ),

    { dispatch: false }

  );

}

Mengambil State dari Penyimpanan Lokal:

Setelah state disimpan ke penyimpanan lokal, langkah berikutnya adalah mengambilnya kembali saat aplikasi dimuat ulang atau dimulai kembali. Anda dapat melakukannya pada saat inisialisasi aplikasi, misalnya pada komponen utama atau dalam layanan yang digunakan di seluruh aplikasi. Berikut adalah contoh pengambilan state dari penyimpanan lokal:@

import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';

import { AppState } from './app.state';

@Component({

  selector: 'app-root',

  template: `

    <!-- Template aplikasi -->

  `,

})

export class AppComponent implements OnInit {

  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {

    const storedState = localStorage.getItem('appState');

    if (storedState) {

      const parsedState = JSON.parse(storedState);

      this.store.dispatch(/* action untuk mengganti state dengan nilai yang disimpan */);

    }

  }

}

Dalam contoh di atas, kita mengambil state dari penyimpanan lokal dan menggantinya dengan state yang diambil. Anda perlu mengganti bagian /* action untuk mengganti state dengan nilai yang disimpan */ dengan action yang sesuai untuk mengganti state dengan nilai yang telah disimpan. Dengan mengikuti langkah-langkah di atas, Anda dapat mengambil ngrx state dari penyimpanan lokal dengan benar. Pastikan untuk mengikuti prinsip-prinsip Redux yang baik, seperti mengelola state secara immutability dan menjaga struktur state agar sesuai dengan kebutuhan aplikasi Anda.