NGRX complete guide with Angular. Learn by doing simple CRUD operations (2023)

(Video) Angular Redux - NgRx Angular, NgRx store, NgRx Effects, NgRx selectors

In this article I will show a full guide on how to make use of ngrx store with Angular to perform basic CRUD operations.

NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:

Managing global and local state.

Isolation of side effects to promote a cleaner component architecture.

Entity collection management.

Integration with the Angular Router.

Developer tooling that enhances developer experience when building many different types of applications.

Create, Read, Update, and Delete (CRUD) are the four basic functions that models should be able to do, at most.

I will create an angular project from scratch to showcase the usage of NGRX in order to handle simple CRUD operations. Also we will install all required packages from ngrx after creating the Angular application. Follow the steps as described below:

1. Install angular cli as global package from npm → Open a terminal and run the following command:

npm i -g @angular/cli

2. Now let’s create a new angular project → Run the follwing command and you will be prompted to add Routing (I chose to accept, it will configure initial routes for you) and choose your preferred stylesheet format (I like SASS that’s why I chose to use SCSS).

ng new crud-ngrx-angular

3. Open the project in your preferred IDE and let’s get into bussiness.

We are going to need some packages provided by ngrx in order to make a full use of it’s store management power. Let’s do it. Open a new terminal and run the following.

1. ngrx store → This package will provide us the basic StoreModule where we can initialize reducers (primitive functions which update the store object). You can learn more about reducers here.

npm i @ngrx/store

2. ngrx effects → This package provides side effetcs model for the Store. In short terms effects listen to a dispatched action and perform a side effect of the action, which can be stuff like calling an api service, updating local storage and of course dispacthing other actions. You can check out Effects docs here.

npm i @ngrx/effects

3. ngrx router store → Bindings to connect the Angular Router with Store. Check it’s documentation here.

npm i @ngrx/router-store

4. Optional: ngrx store dev tools → This package includes developer tools for ngrx. There is also a good chrome extension called Redux Dev Tools. You can add it to your Chrome and there you can see pretty much the store object, what actions we’re dispatching with their respective parameters and everything you need for debugging. It’s recommended to use this only in dev environment and to disable when you’re doing production build.

npm i @ngrx/store-devtools

As a showcase for this example I will use an online booking store with CRUD operations. So I will create a page where you can fetch a list of books, create a new book, update an existing book name and of course deleting. Let’s do it.

1. Create a folder under app and call it store and inside of it create another folder called book.
2. Create another folder which will hold the interfaces we need (We love typescript) and call it interfaces.
3. In the interfaces folder go ahead an create a typescript file called book.interface.ts which looks like the follwing:

export interface IBook {
 id: number;
 name: string;
}

4. Create a folder called services. This will be responsible for having the book.service.ts file which in purpose has the api communication with an API. In my example I will mock everything in the service and return an observable from there but feel free to replace the functions with an http call. There will be 4 functions in the service to fetch, create, update and delete books. The file will look like below:

import { Injectable } from '@angular/core';
import { IBook } from '../interfaces/book.interface';
import { Observable, of } from 'rxjs';
@Injectable({
 providedIn: 'root'
})
export class BookService {
 private booksList: IBook[] = [
 {
 id: Math.random(),
 name: 'Book 1'
 },
 {
 id: Math.random(),
 name: 'Book 2'
 }
 ]
 constructor() {
 }
 getBooks(): Observable<IBook[]> {
 return of(this.booksList);
 }
 create(book: IBook): Observable<IBook> {
 this.booksList = [
 ...this.booksList,
 book
 ];
 return of(book);
 }
 update(updateBook: IBook): Observable<IBook> {
 this.booksList.map(book => book.id === updateBook.id ? updateBook : book);
 return of(updateBook);
 }
 delete(book: IBook): Observable<IBook> {
 this.booksList = this.booksList.filter(b => b.id !== book.id);
 return of(book);
 }
}

5. book.model.ts → Create this file under store/book folder. This will hold the interface of books store.

import { IBook } from '../../interfaces/book.interface';
export interface IBookState {
 books: IBook[];
 isLoading: boolean;
}

6. Under store/book create a file called books.actions.ts → This file will hold all the actions we need to implement the basic CRUD operations.

import { createAction, props } from '@ngrx/store';
import { IBook } from '../../interfaces/book.interface';
const prefix = '[Books]';
export const getBooks = createAction(`${prefix} Get Books`);
export const getBooksSuccess = createAction(
 `${getBooks.type} Success`,
 props<{
 books: IBook[];
 }>()
);
export const createBook = createAction(
 `${prefix} Create Book`,
 props<{
 book: Partial<IBook>;
 }>()
);
export const createBookSuccess = createAction(
 `${createBook.type} Success`,
 props<{
 book: IBook;
 }>()
);
export const updateBook = createAction(
 `${prefix} Update Book`,
 props<{
 book: IBook;
 }>()
);
export const updateBookSuccess = createAction(
 `${updateBook.type} Success`,
 props<{
 book: IBook;
 }>()
);
export const deleteBook = createAction(
 `${prefix} Delete Book`,
 props<{
 book: IBook;
 }>()
);
export const deleteBookSuccess = createAction(
 `${deleteBook.type} Success`,
 props<{
 book: IBook;
 }>()
);

7. index.ts → export everything from actions and selectors. It will help a lot in the imports

export * from './book.actions';
export * from './books.selectors';

8. book.effects.ts → Here we will manage all side effects from action dispatching. In our case we will be calling the books service to manipulate the data.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map, switchMap } from 'rxjs/operators';
import * as fromBooks from './index';
import { BookService } from '../../services/book.service';
import { IBook } from '../../interfaces/book.interface';
@Injectable()
export class BooksEffects {
 constructor(private readonly actions$: Actions, private readonly bookService: BookService) {
 }
 getBooks$ = createEffect(() =>
 this.actions$.pipe(
 ofType(fromBooks.getBooks.type),
 switchMap(() => this.bookService.getBooks()),
 map((books: IBook[]) => fromBooks.getBooksSuccess({books}))
 )
 );
 createBook$ = createEffect(() =>
 this.actions$.pipe(
 ofType(fromBooks.createBook),
 switchMap(({book}) => this.bookService.create(book)),
 map((book: IBook) => fromBooks.createBookSuccess({book}))
 )
 );
 updateBook$ = createEffect(() =>
 this.actions$.pipe(
 ofType(fromBooks.updateBook),
 switchMap(({book}) => this.bookService.update(book)),
 map((book: IBook) => fromBooks.updateBookSuccess({book}))
 )
 );
 deleteBook$ = createEffect(() =>
 this.actions$.pipe(
 ofType(fromBooks.deleteBook),
 switchMap(({book}) => this.bookService.delete(book)),
 map((book: IBook) => fromBooks.deleteBookSuccess({book}))
 )
 );
}

9. book.reducers.ts → Reducers are responsible for updating the state. We do it by using pure functions like destructuring.

import { createReducer, on } from '@ngrx/store';
import { IBookState } from './book.model';
import * as fromBooks from './index';
export const initialBooksState: IBookState = {
 books: [],
 isLoading: false
};
const reducer = createReducer<IBookState>(
 initialBooksState,
 on(fromBooks.getBooks, (state) => {
 return {
 ...state,
 isLoading: true
 };
 }),
 on(fromBooks.getBooksSuccess, (state, { books }) => {
 return {
 ...state,
 isLoading: false,
 books
 };
 }),
 on(fromBooks.createBook, (state) => {
 return {
 ...state,
 isLoading: true,
 };
 }),
 on(fromBooks.createBookSuccess, (state, { book }) => {
 return {
 ...state,
 books: [...state.books, book],
 isLoading: false,
 };
 }),
 on(fromBooks.updateBook, (state) => {
 return {
 ...state,
 isLoading: true,
 };
 }),
 on(fromBooks.updateBookSuccess, (state, { book }) => {
 return {
 ...state,
 books: state.books.map((b) => b.id === book.id ? book : b),
 isLoading: false,
 };
 }),
 on(fromBooks.deleteBook, (state) => {
 return {
 ...state,
 isLoading: true,
 };
 }),
 on(fromBooks.deleteBookSuccess, (state, { book }) => {
 return {
 ...state,
 isLoading: false,
 books: state.books.filter((b) => b.id !== book.id)
 };
 })
);
export function booksReducer(state = initialBooksState, actions): IBookState {
 return reducer(state, actions);
}

10. book.selectors.ts → Selectors fetch data from the store and return it as an observable.

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { IBookState } from './book.model';
export const selectBookState = createFeatureSelector<IBookState>('book');
export const selectBooksList = createSelector(selectBookState, (state) => state.books);
export const selectBookIsLoading = createSelector(selectBookState, (state) => state.isLoading);
(Video) Angular(v14) CRUD Example Using NgRx Data(v14)

11. book-store.module.ts → Here we will register book feature store with respective reducers and effects.

import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { BookEffects } from './book.effects';
import { bookReducer } from './book.reducers';
@NgModule({
 imports: [
 StoreModule.forFeature('book', bookReducer),
 EffectsModule.forFeature([BookEffects])
 ]
})
export class BookStoreModule {}

12. Now we have all ngrx feature store for books in place. Let’s import the feature store module into app.module.ts and make use of StoreDevToolsModule to log our state on Redux dev tools on Chrome.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { BookStoreModule } from './store/book/book-store.module';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 StoreModule.forRoot(),
 EffectsModule.forRoot(),
 StoreDevtoolsModule.instrument({}),
 BookStoreModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {
}

13. If everything was implemented successfully you can run the following command to serve the angular app:

ng serve

and open Chrome dev tools → navigate to Redux like below and click it.

You should have the overview of your NGRX store. Yayy 🚀🚀 !!

13. Let’s see how it works in a component. I will use an HTML simple table and buttons to showcase the functionality, but of course you can perfect your stylesheet and the look of it.

• Delete everything in the app.component.html file.
• app.component.ts file will hold the logic for CRUD operations like getting the books, creating, updating and deleting. You can see the code below:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { IBook } from './interfaces/book.interface';
import { select, Store } from '@ngrx/store';
import * as fromBooks from './store/book/index';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 books$: Observable<IBook[]>;
 isLoading$: Observable<boolean>;
 constructor(private readonly store: Store) {
 }
 ngOnInit(): void {
 this.initDispatch();
 this.initSubscriptions();
 }
 onCreateBook(name: string): void {
 this.store.dispatch(fromBooks.createBook({
 book: {
 id: Math.random(),
 name
 }
 }));
 }
 onUpdateBook(book: IBook): void {
 this.store.dispatch(fromBooks.updateBook({book}));
 }
 onDeleteBook(book: IBook): void {
 this.store.dispatch(fromBooks.deleteBook({book}));
 }
 private initDispatch(): void {
 this.store.dispatch(fromBooks.getBooks());
 }
 private initSubscriptions(): void {
 this.books$ = this.store.pipe(select(fromBooks.selectBooksList));
 this.isLoading$ = this.store.pipe(select(fromBooks.selectBookIsLoading));
 }
}

• app.component.html → Basic HTML buttons and table to show the example

<ng-container
 *ngIf="{
 books: books$ | async,
 isLoading: isLoading$ | async
 } as data"
>
 <div class="header">
 <input #inputElement>
 <button (click)="onCreateBook(inputElement.value)">Create book</button>
 </div>
 <div class="container">
 <table>
 <th>ID</th>
 <th>Name</th>
 <th>Action</th>
 <tbody>
 <tr *ngFor="let book of data.books">
 <td>{{book.id}}</td>
 <td>{{book.name}}</td>
 <td><button (click)="onDeleteBook(book)">Delete</button></td>
 </tr>
 </tbody>
 </table>
 </div>
</ng-container>

As usual, thank you for reading. I appreciate the time you take to read my content and stories. I hope you can find this article useful.

PS: I have pushed all the code used for this article in my bitbucket respository here. If you want to go deeper and add unit tests with JEST to your freshly created NGRX store you can visit my article here.

Stay tuned and happy coding!