Dasar-Dasar NgRx Store

Pelajaran ini memperkenalkan NgRx, solusi manajemen status yang andal untuk aplikasi Angular.

Apa Itu NgRx?

NgRx terinspirasi oleh Redux dan membantu mengelola status secara terpusat dalam aplikasi Angular, sehingga penanganan data antar-komponen menjadi lebih sederhana.

Mengapa Menggunakan NgRx?

• Manajemen status terpusat
• Aliran data yang jelas dan dapat diprediksi
• Pemantauan kesalahan dan pengujian yang lebih mudah

Konsep Inti

NgRx mencakup beberapa konsep utama:

• Store: Menyimpan status aplikasi
• Actions: Menjelaskan peristiwa
• Reducers: Menangani perubahan status
• Selectors: Mengambil data status

Memasang NgRx Store

Pasang NgRx menggunakan npm:

npm install @ngrx/store --save

Membuat Store

Tentukan store di modul aplikasi Anda:

StoreModule.forRoot({ appState: appReducer })

Membuat Actions

Actions menentukan peristiwa dalam aplikasi Anda:

export const loadData = createAction('[App] Load Data');

Reducers

Reducers menangani perubahan status dengan merespons actions dan menghasilkan status baru:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Ringkasan

Anda telah mempelajari dasar-dasar penggunaan NgRx Store untuk mengelola status aplikasi secara efektif. Kerja bagus!