NgRx Course – Introduction & Redux

We’ll begin with an introduction to State Management and look at the benefits. And then we’ll have a look at the Redux pattern. The 3 core principles and the reasons to use a centralized store in our application.

Welcome to Angular Developer! In this course, we’re going to see How to Build Angular Applications with NgRx.

After that, we’ll explore NgRx and then build our own application. Using the NgRx/store library and other libraries that complement it. We will explain each one of them in the context of the application.

And we’ll also see how to use strong typing to prevent errors during development. Will learn how to debug our application and we’ll have a look at some best practices for performance and scalability.

By the end of this course, we’ll have built a small application. One where we’ll be able to create, read, update and delete items from a server. While using a centralized store for state management.

I really hope this course will give you everything you need to know to start building Angular Applications using NgRx.

Let’s begin with an introduction to State Management and the Redux pattern.

State Management

The State is a representation of the application. It can be:

  • User information
  • User input and selection
  • Data we get from the server (entity data)
  • View/UI state (information about the view, such as displaying or hiding specific UI elements)
  • Location or Router state (Where we are in the application)
  • Other information that our application tracks

Look at this example of a slice of state taken from a real application:

{
  customers: {
    customers: [
      {
        name: 'John Doe',
        phone: '910928392098',
        address: '123 Sun Street',
        membership: 'Platinum',
        id: 1
      },
      {
        name: 'Mary Johnson',
        phone: '808937482734',
        address: '893 Main Voulevard',
        membership: 'Pro',
        id: 2
      }
    ],
    loading: false,
    loaded: true,
    error: ''
  }
}

As we can see, the state tree is an object containing all the information that our application needs. In this example we see one slice of state for a specific feature, the customers feature.

As an application grows in complexity and gets larger, it becomes more difficult to manage. Multiple types of state can react to changes, losing their predictability and creating bugs that are hard to find.

Redux

The Redux pattern was introduced to make state mutations predictable. It’s basically a state container and it follows 3 core principles:

  • Single source of truth (store)
    • “… the first principle of Redux, which is that, everything that changes in your application, including the data and the UI state, is contained in a single object, we call the state or the state tree. (Dan Abramov – Getting Started With Redux
      https://egghead.io/courses/getting-started-with-redux)
  • The state is read only (immutable)
    • “The only way to change the state tree is by dispatching an action. An action is a plain JavaScript object, describing in the minimal way what changed in the application.”
  • All changes in the state are made by pure functions called Reducers
    • “To describe state mutations, you have to write a function that takes the previous state of the app, the action being dispatched, and returns the next state of the app. This function has to be pure. This function is called the “Reducer.”

So to explain further, the process would look something like the following:

  • an action is dispatched
  • a reducer responds to the action dispatched, takes the current state of the application and performs an operation. For example, it could be, adding one item to the list.
  • the reducer returns the new state replacing the old state

Reducers are pure functions that specify how the state changes in response to an action. And reducers don’t mutate the state. Instead, they produce a new state. A reducer function takes the action being dispatched by the current state and returns the new state of the app.

Benefits of the Redux Pattern

The main benefit of the Redux pattern is predictability. Because the state is immutable and can’t be changed. We need to create copies of the state using a reducer that will update it. This makes mutations predictable and the application is easier to inspect and test.

We are not going to explore Redux in detail in this course, instead, we’re going to focus on how to use the Redux pattern in our Angular application with NgRx. If you want to know more about Redux I highly recommend that you watch the free course created by the author, Dan Abramov, where he demonstrates these principles in depth:

Dan Abramov – Getting Started With Redux:
https://egghead.io/courses/getting-started-with-redux