Gain insights into state management in Angular with NgRx. Learn to use store, actions, reducers, selectors, handle side effects, and write unit tests for scalable applications.

angular.tar.gz

CHROME_BIN

angular

angular-test-reducers

angular-test-copy

angular-test-selectors

angular-test-effects-success

angular-test-effects-error

This course is designed to teach you how to manage states in Angular using the powerful NgRx library.

You’ll learn the fundamentals of state management and how it can be implemented in an Angular application using NgRx. Next, you’ll learn how to use the NgRx store, actions, reducers, and selectors to manage the application states and handle complex data. You’ll also learn how to handle side effects and asynchronous operations in an Angular application.

Throughout the course, you’ll gain hands-on experience in implementing state management using interactive projects. You’ll learn best practices and design patterns for state management in Angular and how to structure the state of an application using NgRx. Additionally, you’ll learn how to write unit test cases for NgRx features.

By the end of the course, you’ll be able to implement and debug states in an Angular application. You’ll be able to create more scalable, maintainable, and testable Angular applications that can handle complex states and data.

Mastering State Management with Angular and NgRx

# Introduction


In the products module of our application, we have defined three actions. We handled those actions in the `src/app/products/state/products.reducers.ts` file with the `productsReducer`.

  import { createAction, props } from "@ngrx/store";
  import { Product } from "src/app/app.interfaces";
  
  export const getProductsAction = createAction(
    '[Products] Get Products',
    props<{ products: Product[] }>()
  )
  
  export const loadProductsAction = createAction(
    '[Products] Load Products'
  )
  
  export const getErrorAction = createAction(
    '[Products] Load Products Error'
  )

src/app/products/state/products.actions.ts

import { createReducer, on } from "@ngrx/store";
import { loadProductsAction, getProductsAction, getErrorAction } from "./products.actions";
import { ProductsState } from "./products.interfaces";
import { productsInitialState } from "./products.state";

export const productsReducer = createReducer<ProductsState>(
  productsInitialState,
  on(getProductsAction, (state, { products }): ProductsState => [ ...products ]),
  on(loadProductsAction, (state): ProductsState => {  
    return [ ...state ];
  }),
  on(getErrorAction, (state): ProductsState => {
    return [ ...state ];
  })
)

src/app/products/state/products.reducers.ts

In this lesson, let's write a test case to verify if our `productsReducer` is properly handling the `getProductsAction()`.

# Unit testing the NgRx reducers


We can unit test the NgRx reducers by following the steps below.

## Creating a `spec` file


Inside the `src/app/products/state` folder, let's create a new file named the `products.reducers.spec.ts` file. Angular will not run this test file unless we add the `spec` extension.

## Defining the test suite

Let's define a test suite by using the `describe` function. It receives two parameters. The first parameter specifies the test suite's title, and the second is a callback function that contains our test code.

Learn how to unit test the NgRx reducers.

Getting Started

Redux Fundamentals

NgRx Fundamentals

Implementing NgRx Fundamentals

Debugging NgRx

NgRx with TypeScript

NgRx: Advanced Concepts

NgRx Effects

Build a Trello Clone in Angular using NgRx

Unit Testing NgRx

Implementing Shopping Cart Functionality

Appendix

Conclusion

E-Commerce Store With Stripe API Integration

Testing Reducers

Introduction

Unit testing the NgRx reducers

Creating a `spec` file

Defining