Membangun Aplikasi Angular Multi-Modul dengan NgRx: Panduan Lengkap

Mengembangkan aplikasi Angular berskala besar bisa menjadi tantangan. Manajemen state yang efektif menjadi sangat penting untuk menjaga aplikasi tetap teratur, mudah dipelihara, dan mudah diuji. NgRx, perpustakaan manajemen state reaktif untuk Angular, menawarkan solusi yang kuat untuk tantangan ini. Artikel ini memandu Anda melalui proses membangun aplikasi Angular multi-modul dengan NgRx, mencakup semua aspek penting, mulai dari menyiapkan lingkungan hingga menerapkan fitur-fitur kompleks.

Mengapa Aplikasi Multi-Modul dan NgRx?

Sebelum kita menyelami detail implementasi, mari kita pahami mengapa kombinasi aplikasi multi-modul dan NgRx sangat bermanfaat:

• Modularitas: Aplikasi multi-modul membagi aplikasi menjadi bagian-bagian yang lebih kecil dan independen. Ini meningkatkan keterbacaan kode, mempermudah pemeliharaan, dan memungkinkan pengembangan fitur paralel.
• Skalabilitas: Saat aplikasi Anda tumbuh, modularitas mempermudah penambahan fitur baru dan memelihara kode yang ada tanpa memperkenalkan bug atau konflik.
• Penggunaan Kembali Kode: Modul dapat digunakan kembali di berbagai bagian aplikasi atau bahkan di aplikasi lain, mengurangi duplikasi kode dan mempercepat proses pengembangan.
• NgRx untuk Manajemen State: NgRx menerapkan arsitektur Redux, yang memusatkan state aplikasi dan mengelolanya dengan cara yang dapat diprediksi dan dikontrol.
• Prediktabilitas: Dengan NgRx, perubahan state dipicu oleh aksi dan diubah oleh reducers. Ini membuat debug lebih mudah karena Anda dapat melacak urutan aksi yang menyebabkan state saat ini.
• Kemudahan Pengujian: Karena state dan logika bisnis dipisahkan dari komponen UI, pengujian menjadi lebih mudah dan lebih menyeluruh.

Kerangka Artikel

1. Pengantar: Aplikasi Angular Multi-Modul dengan NgRx
   • Mengapa Aplikasi Multi-Modul?
   • Mengapa NgRx untuk Manajemen State?
2. Menyiapkan Lingkungan Pengembangan
   • Prasyarat
   • Membuat Aplikasi Angular Baru
   • Menginstal NgRx
   • Menyiapkan Alat Pengembangan NgRx
3. Merancang Arsitektur Aplikasi Multi-Modul
   • Mengidentifikasi Modul
   • Menentukan Tanggung Jawab Setiap Modul
   • Merencanakan Komunikasi Antar Modul
4. Membuat Modul Fitur
   • Membuat Modul Angular
   • Menambahkan Komponen, Layanan, dan Rute
   • Mengonfigurasi Lazy Loading (Opsional)
5. Menerapkan Manajemen State dengan NgRx
   • Membuat Actions
   • Membuat Reducers
   • Membuat Selectors
   • Membuat Effects
   • Menghubungkan Komponen ke Store NgRx
6. Komunikasi Antar Modul dengan NgRx
   • Menggunakan Aksi Global
   • Berbagi State dengan Selectors
7. Penyelesaian Masalah Umum dan Praktik Terbaik
   • Menghindari Mutasi State Langsung
   • Menggunakan Selectors untuk Efisiensi
   • Menguji dengan NgRx
   • Mengatasi Kondisi Balapan (Race Conditions) dengan Effects
8. Contoh Aplikasi Lengkap
   • Arsitektur Aplikasi
   • Implementasi Modul
   • Demo dan Penjelasan Kode
9. Kesimpulan
   • Ringkasan Manfaat Menggunakan NgRx dan Aplikasi Multi-Modul
   • Langkah Selanjutnya untuk Mempelajari Lebih Lanjut

1. Pengantar: Aplikasi Angular Multi-Modul dengan NgRx

Bagian ini memberikan pengantar tentang konsep aplikasi multi-modul dan peran NgRx dalam manajemen state.

Mengapa Aplikasi Multi-Modul?

Aplikasi multi-modul menawarkan beberapa keuntungan, termasuk:

• Peningkatan Organisasi Kode: Membagi aplikasi menjadi modul yang lebih kecil dan terfokus membuat kode lebih mudah dipahami, dipelihara, dan di-debug.
• Penggunaan Kembali Kode: Modul dapat digunakan kembali di seluruh aplikasi atau bahkan di aplikasi lain, mengurangi duplikasi kode dan mempercepat pengembangan.
• Pengembangan Paralel: Tim yang berbeda dapat bekerja pada modul yang berbeda secara bersamaan, yang mengarah pada waktu penyelesaian proyek yang lebih cepat.
• Lazy Loading: Modul dapat dimuat sesuai permintaan, yang dapat meningkatkan waktu muat awal aplikasi.

Mengapa NgRx untuk Manajemen State?

NgRx menyediakan kerangka kerja yang terstruktur dan dapat diprediksi untuk mengelola state aplikasi. Manfaat utamanya meliputi:

• State Terpusat: State aplikasi disimpan dalam satu store, yang membuat lebih mudah untuk melacak perubahan dan debug masalah.
• Perubahan State yang Dapat Diprediksi: Perubahan state dipicu oleh aksi dan diubah oleh reducers, yang merupakan fungsi murni. Ini membuat lebih mudah untuk memahami bagaimana state berubah dari waktu ke waktu.
• Debugging yang Lebih Mudah: Alat pengembangan NgRx memungkinkan Anda untuk melacak aksi, reducers, dan perubahan state, yang membuat debug masalah lebih mudah.
• Skalabilitas: NgRx dapat diskalakan untuk menangani aplikasi yang kompleks dengan sejumlah besar state.

2. Menyiapkan Lingkungan Pengembangan

Bagian ini memandu Anda melalui langkah-langkah untuk menyiapkan lingkungan pengembangan Anda, termasuk menginstal alat yang diperlukan.

Prasyarat

Sebelum memulai, pastikan Anda telah menginstal yang berikut:

• Node.js: Download dan instal versi terbaru dari Node.js.
• npm (Node Package Manager): npm biasanya diinstal bersama dengan Node.js. Verifikasi instalasi dengan menjalankan `npm -v` di terminal Anda.
• Angular CLI: Instal Angular CLI secara global menggunakan perintah `npm install -g @angular/cli`.

Membuat Aplikasi Angular Baru

Gunakan Angular CLI untuk membuat aplikasi Angular baru:

1. Buka terminal atau command prompt.
2. Navigasikan ke direktori tempat Anda ingin membuat proyek.
3. Jalankan perintah `ng new multi-module-ngrx-app`.
4. Saat diminta, pilih opsi konfigurasi yang diinginkan (misalnya, routing dan format stylesheet).

Menginstal NgRx

Instal paket NgRx yang diperlukan menggunakan npm:

1. Navigasikan ke direktori proyek Anda menggunakan `cd multi-module-ngrx-app`.
2. Jalankan perintah berikut untuk menginstal paket NgRx utama:
   • `npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools –save`

Penjelasan:

• `@ngrx/store`: Paket inti untuk manajemen state dengan NgRx.
• `@ngrx/effects`: Paket untuk menangani efek samping (misalnya, panggilan API).
• `@ngrx/entity`: Paket untuk mengelola koleksi entitas.
• `@ngrx/store-devtools`: Paket untuk menyediakan alat pengembangan untuk men-debug aplikasi NgRx.

Menyiapkan Alat Pengembangan NgRx

Konfigurasikan `StoreDevtoolsModule` dalam modul aplikasi utama Anda (`app.module.ts`) untuk mengaktifkan alat pengembangan:

“`typescript
// app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { StoreModule } from ‘@ngrx/store’;
import { StoreDevtoolsModule } from ‘@ngrx/store-devtools’;

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
StoreModule.forRoot({}, {}), // Tambahkan reducers Anda di sini
StoreDevtoolsModule.instrument({
maxAge: 25, // Mempertahankan 25 state terakhir
logOnly: !environment.production, // Batasi log dalam mode produksi
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
“`

Pastikan Anda mengganti `environment.production` dengan nilai yang benar untuk lingkungan pengembangan Anda.

3. Merancang Arsitektur Aplikasi Multi-Modul

Bagian ini berfokus pada perancangan arsitektur aplikasi multi-modul Anda, mengidentifikasi modul, menentukan tanggung jawab, dan merencanakan komunikasi antar modul.

Mengidentifikasi Modul

Langkah pertama adalah mengidentifikasi modul utama aplikasi Anda. Pertimbangkan fungsionalitas dan fitur yang berbeda. Contoh umum meliputi:

• Core Module: Berisi layanan inti, komponen, dan modul yang digunakan di seluruh aplikasi. Ini biasanya diimpor oleh modul lain.
• Shared Module: Berisi komponen, directive, dan pipe yang digunakan di beberapa modul fitur. Ini bertujuan untuk penggunaan kembali kode.
• Auth Module: Menangani otentikasi pengguna dan manajemen sesi.
• User Module: Mengelola informasi pengguna dan profil.
• Product Module: Menampilkan dan mengelola produk.
• Cart Module: Menangani keranjang belanja pengguna.
• Order Module: Menangani pemesanan dan pelacakan pesanan.

Menentukan Tanggung Jawab Setiap Modul

Setelah Anda mengidentifikasi modul Anda, tentukan tanggung jawab setiap modul dengan jelas. Ini membantu menjaga setiap modul terfokus dan mudah dipelihara. Misalnya:

• Auth Module:
  • Menangani proses login dan registrasi.
  • Menyimpan dan mengelola token otentikasi.
  • Menyediakan layanan untuk memeriksa otentikasi pengguna.
• Product Module:
  • Menampilkan daftar produk.
  • Menampilkan detail produk.
  • Memungkinkan pengguna untuk mencari produk.

Merencanakan Komunikasi Antar Modul

Rencanakan bagaimana modul Anda akan berkomunikasi satu sama lain. Karena kita menggunakan NgRx, komunikasi antar modul akan sangat bergantung pada store state global. Pertimbangkan opsi berikut:

• Aksi Global: Gunakan aksi yang dapat dipicu oleh satu modul dan didengarkan oleh modul lain.
• Selectors Bersama: Gunakan selector untuk mengakses state dari modul lain.

4. Membuat Modul Fitur

Bagian ini menunjukkan cara membuat modul fitur dengan komponen, layanan, dan rute.

Membuat Modul Angular

Gunakan Angular CLI untuk membuat modul fitur:

1. Buka terminal.
2. Navigasikan ke direktori proyek Anda.
3. Jalankan perintah `ng generate module product`.

Ini akan membuat direktori `product` dengan file `product.module.ts` di dalamnya.

Menambahkan Komponen, Layanan, dan Rute

Tambahkan komponen, layanan, dan rute ke modul Anda menggunakan Angular CLI:

1. Untuk membuat komponen, jalankan `ng generate component product-list –module product`.
2. Untuk membuat layanan, jalankan `ng generate service product –module product`.

Konfigurasikan rute untuk modul Anda dalam file `product-routing.module.ts` (Anda mungkin perlu membuatnya):

“`typescript
// product-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { ProductListComponent } from ‘./product-list/product-list.component’;

const routes: Routes = [
{ path: ”, component: ProductListComponent }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductRoutingModule { }
“`

Pastikan untuk mengimpor `ProductRoutingModule` ke dalam `ProductModule`:

“`typescript
// product.module.ts
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;

import { ProductRoutingModule } from ‘./product-routing.module’;
import { ProductListComponent } from ‘./product-list/product-list.component’;

@NgModule({
declarations: [
ProductListComponent
],
imports: [
CommonModule,
ProductRoutingModule
]
})
export class ProductModule { }
“`

Mengonfigurasi Lazy Loading (Opsional)

Untuk meningkatkan kinerja aplikasi, Anda dapat mengonfigurasi lazy loading untuk modul fitur Anda. Ini berarti bahwa modul akan dimuat hanya ketika dibutuhkan.

1. Buka file `app-routing.module.ts`.
2. Tambahkan rute dengan `loadChildren` yang menunjuk ke modul Anda:

“`typescript
// app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{
path: ‘products’,
loadChildren: () => import(‘./product/product.module’).then(m => m.ProductModule)
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
“`

5. Menerapkan Manajemen State dengan NgRx

Bagian ini memandu Anda melalui proses menerapkan manajemen state dengan NgRx, termasuk membuat actions, reducers, selectors, dan effects.

Membuat Actions

Actions adalah objek JavaScript biasa yang menggambarkan *apa* yang terjadi dalam aplikasi. Mereka adalah satu-satunya cara untuk memodifikasi state.

1. Buat file bernama `product.actions.ts` di dalam direktori modul produk.
2. Definisikan konstanta untuk setiap aksi:

“`typescript
// product.actions.ts
import { createAction, props } from ‘@ngrx/store’;
import { Product } from ‘./product.model’; // Asumsikan Anda memiliki model Product

export const loadProducts = createAction(‘[Product] Load Products’);
export const loadProductsSuccess = createAction(‘[Product] Load Products Success’, props<{ products: Product[] }>());
export const loadProductsFailure = createAction(‘[Product] Load Products Failure’, props<{ error: any }>());
“`

Penjelasan:

• `createAction` membuat aksi baru.
• Argumen pertama adalah string yang secara unik mengidentifikasi aksi. Biasanya diawali dengan konteks (misalnya, `[Product]`).
• `props` digunakan untuk menentukan payload (data) yang dibawa oleh aksi.

Membuat Reducers

Reducers adalah fungsi murni yang mengambil state sebelumnya dan sebuah aksi, dan mengembalikan state baru. Mereka menentukan *bagaimana* state berubah sebagai respons terhadap aksi.

1. Buat file bernama `product.reducer.ts` di dalam direktori modul produk.
2. Definisikan state awal dan reducer:

“`typescript
// product.reducer.ts
import { createReducer, on } from ‘@ngrx/store’;
import { Product } from ‘./product.model’;
import * as ProductActions from ‘./product.actions’;

export interface ProductState {
products: Product[];
loading: boolean;
error: any;
}

export const initialState: ProductState = {
products: [],
loading: false,
error: null
};

export const productReducer = createReducer(
initialState,
on(ProductActions.loadProducts, (state) => ({ …state, loading: true })),
on(ProductActions.loadProductsSuccess, (state, { products }) => ({ …state, products: products, loading: false, error: null })),
on(ProductActions.loadProductsFailure, (state, { error }) => ({ …state, loading: false, error: error }))
);
“`

Penjelasan:

• `createReducer` membuat reducer baru.
• Argumen pertama adalah state awal.
• `on` digunakan untuk menentukan bagaimana state harus diubah sebagai respons terhadap aksi tertentu.

Membuat Selectors

Selectors adalah fungsi yang digunakan untuk mengambil potongan state tertentu dari store. Mereka membantu menjaga komponen Anda tidak bergantung pada struktur state dan memungkinkan pengoptimalan.

1. Buat file bernama `product.selectors.ts` di dalam direktori modul produk.
2. Definisikan selector:

“`typescript
// product.selectors.ts
import { createFeatureSelector, createSelector } from ‘@ngrx/store’;
import { ProductState } from ‘./product.reducer’;

export const selectProductState = createFeatureSelector(‘products’); // ‘products’ adalah nama fitur di StoreModule.forRoot()

export const selectAllProducts = createSelector(
selectProductState,
(state: ProductState) => state.products
);

export const selectProductLoading = createSelector(
selectProductState,
(state: ProductState) => state.loading
);

export const selectProductError = createSelector(
selectProductState,
(state: ProductState) => state.error
);
“`

Penjelasan:

• `createFeatureSelector` digunakan untuk membuat selector yang menunjuk ke bagian state tertentu (fitur). Nama fitur harus sesuai dengan nama yang digunakan saat mengonfigurasi `StoreModule.forRoot()`.
• `createSelector` digunakan untuk membuat selector yang mengambil data dari state fitur.

Membuat Effects

Effects adalah side effect yang berjalan sebagai respons terhadap aksi. Mereka digunakan untuk melakukan tugas seperti membuat panggilan API, berinteraksi dengan penyimpanan lokal, atau memicu aksi lain.

1. Buat file bernama `product.effects.ts` di dalam direktori modul produk.
2. Definisikan efek:

“`typescript
// product.effects.ts
import { Injectable } from ‘@angular/core’;
import { Actions, createEffect, ofType } from ‘@ngrx/effects’;
import { catchError, map, mergeMap } from ‘rxjs/operators’;
import { of } from ‘rxjs’;
import * as ProductActions from ‘./product.actions’;
import { ProductService } from ‘./product.service’; // Asumsikan Anda memiliki ProductService

@Injectable()
export class ProductEffects {

loadProducts$ = createEffect(() => this.actions$.pipe(
ofType(ProductActions.loadProducts),
mergeMap(() => this.productService.getProducts()
.pipe(
map(products => ProductActions.loadProductsSuccess({ products })),
catchError(error => of(ProductActions.loadProductsFailure({ error })))
)
)
));

constructor(private actions$: Actions, private productService: ProductService) { }
}
“`

Penjelasan:

• `createEffect` membuat efek baru.
• `ofType` memfilter aksi yang ditangani oleh efek.
• `mergeMap` digunakan untuk memanggil layanan dan memetakan hasilnya ke aksi baru.
• `catchError` digunakan untuk menangani kesalahan dan memicu aksi kegagalan.

Menghubungkan Komponen ke Store NgRx

Hubungkan komponen Anda ke store NgRx menggunakan `Store.select` untuk mengambil data dan `Store.dispatch` untuk memicu aksi.

1. Buka file komponen Anda (misalnya, `product-list.component.ts`).
2. Suntikkan `Store` ke dalam konstruktor komponen.
3. Gunakan `Store.select` untuk mengambil data dari store.
4. Gunakan `Store.dispatch` untuk memicu aksi.

“`typescript
// product-list.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { Store } from ‘@ngrx/store’;
import { Observable } from ‘rxjs’;
import { Product } from ‘../product.model’;
import * as ProductActions from ‘../product.actions’;
import * as ProductSelectors from ‘../product.selectors’;

@Component({
selector: ‘app-product-list’,
templateUrl: ‘./product-list.component.html’,
styleUrls: [‘./product-list.component.css’]
})
export class ProductListComponent implements OnInit {

products$: Observable;
loading$: Observable;
error$: Observable;

constructor(private store: Store) { }

ngOnInit(): void {
this.products$ = this.store.select(ProductSelectors.selectAllProducts);
this.loading$ = this.store.select(ProductSelectors.selectProductLoading);
this.error$ = this.store.select(ProductSelectors.selectProductError);

this.store.dispatch(ProductActions.loadProducts());
}

}
“`

JANGAN LUPA! Daftarkan reducer dan effects pada root module atau feature module:

“`typescript
//product.module.ts

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;

import { ProductRoutingModule } from ‘./product-routing.module’;
import { ProductListComponent } from ‘./product-list/product-list.component’;
import { StoreModule } from ‘@ngrx/store’;
import { EffectsModule } from ‘@ngrx/effects’;
import { productReducer } from ‘./product.reducer’;
import { ProductEffects } from ‘./product.effects’;

@NgModule({
declarations: [
ProductListComponent
],
imports: [
CommonModule,
ProductRoutingModule,
StoreModule.forFeature(‘products’, productReducer), // ‘products’ adalah nama fitur
EffectsModule.forFeature([ProductEffects])
]
})
export class ProductModule { }

“`

6. Komunikasi Antar Modul dengan NgRx

Bagian ini menjelaskan cara mengimplementasikan komunikasi antar modul dengan NgRx.

Menggunakan Aksi Global

Aksi global adalah aksi yang didefinisikan dalam modul inti (core module) dan dapat dipicu oleh modul lain. Untuk menggunakannya, Anda harus mengimpor aksi global ke modul yang ingin memicu aksi dan dispatch aksi tersebut ke store. Contohnya adalah aksi untuk menampilkan notifikasi.

Berbagi State dengan Selectors

Selectors dapat digunakan untuk berbagi state antar modul. Anda dapat membuat selector di satu modul dan mengimpornya ke modul lain untuk mengakses state. Ini memungkinkan Anda untuk memusatkan logika akses state dan menghindari duplikasi.

7. Penyelesaian Masalah Umum dan Praktik Terbaik

Bagian ini membahas masalah umum dan praktik terbaik untuk mengembangkan aplikasi Angular dengan NgRx.

Menghindari Mutasi State Langsung

Penting untuk menghindari mutasi state secara langsung. Reducers harus selalu mengembalikan objek state baru. Gunakan operator spread (`…`) untuk membuat salinan state dan mengubahnya.

Menggunakan Selectors untuk Efisiensi

Gunakan selectors untuk mengambil data dari store. Selectors dapat di-memoize, yang berarti mereka hanya akan dieksekusi ulang jika state yang mendasarinya berubah. Ini dapat meningkatkan kinerja secara signifikan.

Menguji dengan NgRx

Pengujian adalah bagian penting dari pengembangan aplikasi NgRx. Anda harus menguji aksi, reducers, dan effects Anda secara terpisah. Gunakan alat pengujian seperti Jasmine dan Karma.

Mengatasi Kondisi Balapan (Race Conditions) dengan Effects

Efek samping bisa menimbulkan *race condition* jika tidak ditangani dengan benar. Gunakan operator RxJS seperti `switchMap`, `exhaustMap`, atau `concatMap` untuk mengelola efek samping dan mencegah kondisi balapan.

8. Contoh Aplikasi Lengkap

Bagian ini akan memberikan contoh aplikasi lengkap yang mengimplementasikan konsep yang telah dibahas di atas.

Arsitektur Aplikasi

Aplikasi contoh akan menjadi aplikasi manajemen tugas sederhana dengan modul berikut:

• Core Module: Layanan inti dan konfigurasi.
• Auth Module: Otentikasi pengguna.
• Task Module: Manajemen tugas.

Implementasi Modul

(Kode implementasi detail untuk setiap modul akan sangat panjang dan disesuaikan dengan fungsi spesifik aplikasi, namun prinsip dasar akan tetap sama seperti yang dijelaskan di atas – Actions, Reducers, Selectors, Effects untuk setiap modul. Fokus pada bagaimana modul `Task Module` berinteraksi dengan `Auth Module` melalui store, contohnya, untuk mendapatkan ID user yang sedang login.)

Demo dan Penjelasan Kode

(Penjelasan kode akan menyoroti bagian-bagian penting dari aplikasi contoh, termasuk cara memicu aksi, menangani state dengan reducers, dan mengambil data dengan selectors.)

9. Kesimpulan

Bagian ini meringkas manfaat menggunakan NgRx dan aplikasi multi-modul dan memberikan langkah selanjutnya untuk dipelajari lebih lanjut.

Ringkasan Manfaat Menggunakan NgRx dan Aplikasi Multi-Modul

• Organisasi Kode yang Lebih Baik: Modul dan NgRx membantu menyusun aplikasi Anda dengan cara yang jelas dan mudah dipahami.
• Manajemen State yang Dapat Diprediksi: NgRx menyediakan cara yang terstruktur untuk mengelola state aplikasi Anda, yang membuat lebih mudah untuk di-debug dan dipertahankan.
• Penggunaan Kembali Kode: Modul dapat digunakan kembali di seluruh aplikasi Anda, yang mengurangi duplikasi kode.
• Skalabilitas: Arsitektur multi-modul dengan NgRx mudah diskalakan untuk menangani aplikasi yang kompleks.

Langkah Selanjutnya untuk Mempelajari Lebih Lanjut

Untuk mempelajari lebih lanjut tentang NgRx dan aplikasi multi-modul, pertimbangkan sumber daya berikut:

• Dokumentasi NgRx: https://ngrx.io/
• Kursus dan Tutorial Online: Banyak kursus dan tutorial online yang mengajarkan cara menggunakan NgRx.
• Repositori GitHub: Jelajahi repositori GitHub untuk aplikasi NgRx contoh.
• Komunitas NgRx: Bergabunglah dengan komunitas NgRx untuk mendapatkan bantuan dan berbagi pengetahuan.

Dengan mengikuti panduan ini, Anda dapat membangun aplikasi Angular multi-modul yang terstruktur dengan baik, mudah dipelihara, dan mudah diskalakan dengan NgRx.