Learn state management in Angular using NgRx: store, actions, reducers, selectors, side effects, etc. Gain hands-on experience and best practices.

Become an AngularJS Developer

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

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

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

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

Angular State Management



**(True or False)** In Redux, all of your app's states are placed in a single object called store.

(True or False) In Redux, all of your app’s states are placed in a single object called store.



**(True or False)** You can mutate the state directly from your app's components.

(True or False) You can mutate the state directly from your app’s components.

**(True or False)** You can mutate the state through a pure function called action.

(True or False) You can mutate the state through a pure function called action.

**(True or False)** In Redux, the store acts as a single source of truth for your app's state.

(True or False) In Redux, the store acts as a single source of truth for your app’s state.

What feature of an Angular application does the Redux store replace?

What feature of an Angular application does the Redux store replace?

```
{
  payload: {
    counter: 1
  }
}
```

```
{
  type: '[Counter] Increment'
}
```

```
{
  type: '[Counter] Decrement',
  payload: {
    counter: 1
  }
}
```

**(Select all that apply.)** Which options show valid structures of the action object?

(Select all that apply.) Which options show valid structures of the action object?

```
function addToCart(data) {
  return {
    type: '[Counter] Increment',
    payload: data
  }
}
```

```
function addToCart() {
  return {
    type: '[Counter] Increment',
    payload: 1
  }
}
```

```
function addToCart(data) {
  return {
    payload: data
  }
}
```

```
function addToCart(data) {
  return {
    type: '[Counter] Increment'
  }
}
```

**(Select all that apply.)** Which options show valid action creator functions?

(Select all that apply.) Which options show valid action creator functions?

```
function multiply(a, b) {
  return a * b;
}
```

```
function fetchBooks() {
  let books = '';
  fetch('http://example.com/books.json')
    .then(response => response.json())
    .then(data => books = data);
}
```

```
function sum(a, b) {
  console.log(a+b);
  return a + b;
}
```

**(Select all that apply.)** Which options will cause side effects?

(Select all that apply.) Which options will cause side effects?

JavaScript objects are immutable by default.

How can you make an object immutable in JavaScript?

How can you make an object immutable in JavaScript?

The `type` property of the action object.

The `payload` property of the action object.

**(Select all that apply.)** Which options are valid arguments of a reducer function?

(Select all that apply.) Which options are valid arguments of a reducer function?

Basics of Redux

Basics of Redux

Test your knowledge of Redux fundamentals.

Redux Fundamentals

NgRx Fundamentals

Implementing NgRx Fundamentals

Debugging NgRx

NgRx with TypeScript

NgRx: Advanced Concepts

NgRx Effects

Unit Testing NgRx

Implementing Shopping Cart Functionality

Appendix

Conclusion