Angular NgRx: Getting Started

Course Overview
Hey everyone, my name is Deborah Kurata, and I'm Duncan Hunter. Welcome to our course, Angular NgRx: Getting Started. This course gets you started with NgRx, the powerful library for organizing and managing state and interactions with that state in your Angular applications using the Redux pattern. We look at the three principles of the Redux pattern that NgRx follows and the benefits this brings to your Angular applications, such as state management, performance, tooling, and component communication. Next, we implement the pattern. We define a single store for our application state. We dispatch actions and process those actions with reducers, creating new state. We look at the awesome Redux dev tools browser extension to take your tooling to the next level with time travel debugging. We strongly type our state with interfaces and selectors and strongly type our actions with action creators. We end up with a clear and clean set of actions that the tooling uses to help us better dispatch and process those actions. Then we look at effects to deal with side effects and how these can help keep your components pure and more reusable. We go step by step through how to master these complex, but powerful, observable streams. Lastly, we explore key architectural considerations, including presentational and container component patterns and taking advantage of Angular's change detection strategy called OnPush. By the end of this course, you'll know the basics of using NgRx and the Redux pattern it implements. So you can get started using NgRx in your applications. I hope you'll join us on this journey to learn NgRx with Angular NgRx: Getting Started at Pluralsight.

The Redux Pattern
Before we jump into implementing NgRx, let's take a high-level look at the pattern it follows. Welcome back to Angular NgRx: Getting Started, from Pluralsight. My name is Duncan Hunter, and in this module we cover the core concepts and principles of the Redux pattern used by NgRx. Patterns bring order to chaos, and the Redux pattern is no different. Redux is not just an Angular concept and is implemented in almost all major front-end frameworks. React has Redux the library, View has Vuex, and Angular has NgRx. So what is the Redux pattern? Redux is a way to implement a predictable state container for JavaScript apps. Redux the library, which was the first to implement the Redux pattern, was based on Facebook's Flux library, and in the last few years has become the dominant state management pattern for single-page applications. The Redux pattern, which NgRx is based on, has three main principles. First, there is only one single source of truth for application state called the store. Second is that state is ready-only and the only way to change state is to dispatch an action. And the third, is changes to the store are made using pure functions called reducers. In this module, we examine the core principles of the Redux pattern used by NgRx, including the store, actions, and reducers. And finally, we'll highlight the main benefits you can expect to get from using Redux. Let's get started.

Developer Tools and Debugging
To really see what is going on with our application and our store, we need some tools. Welcome back to Angular NgRx: Getting Started from Pluralsight. My name is Duncan Hunter, and in this module we install the Redux DevTools available with NgRx. Having the right tools is critical for debugging your Angular applications, and with NgRx you get to take your tooling to the next level with the Redux DevTools. Previously we needed to console log our actions in the reducer to get a visual on what actions were being dispatched, but let's start using the awesome tools already available to us. In this module, we look at how to get the Redux DevTools browser extension, install the ngrx/store-devtools package, navigate and use the tools, and look at how to do time travel debugging. Let's get started.

Working with Effects
Sometimes our actions require asynchronous or other operations with side effects, such as retrieving or setting data to a backend server. Welcome back to Angular NgRx: Getting Started from Pluralsight. My name is Duncan Hunter and in this module we examine the Effects library from NgRx. Predictable cause and effect in our Angular applications can be achieved by writing side effect free code, but some of our code will have side effects by design, and this is where the NgRx Effects library can help us. In this module, we'll look at what NgRx effects are and why use them. We'll install the @ngrx/effects package. We'll define an effect, step by step, register an effect, use effects by dispatching actions acted on by effects, look at how to unsubscribe from observables, and discuss exception handling in effects. Let's get started.

Performing Update Operations
Most applications allow the user to add, update, or delete entity data. Welcome back to Angular NgRx: Getting Started from Pluralsight. My name is Deborah Kurata and in this module we examine how to perform update operations with NgRx. Sometimes it only takes a small change to have a big impact. So it's often important to allow the user to make changes to the application's data. Here the user clicks Add to add a new product or selects a product to modify its properties, or clicks Delete to remove the product. Each of these operations requires a set of actions and effect to perform the operation and reducer code to process the operation's success and fail actions, replacing the state and the store with new state. Our components subscribe through selectors to watch for state changes and the view updates to reflect those changes. Our objective in this module is to implement NgRx, start to finish, for one operation, the update operation. In this module, we start by identifying the state and actions for our operation. We strongly type the state with an interface and build selectors and strongly type the actions by building action creators. We dispatch an action for the operation and build the effect to process that action and perform the operation. Then we modify our reducer to process the operation's success and fail actions. Let's get started.

Architectural Considerations
All teams, when starting to use NgRx in their applications, have architectural decisions to make. Welcome back to Angular NgRx: Getting Started from Pluralsight. My name is Duncan Hunter and in this module we cover architectural considerations when using NgRx. Good architecture needs good plans and Angular architecture is no different. Keeping Angular applications performant, maintainable, bug free and readable, as the code base and teams that work on them grow, is challenging. Following key architectural patterns can keep your code and team operating at its best. In this module, we examine keeping your state folders by feature or by function, discuss the presentation and container components pattern. We'll look at Angular's change detection strategy called OnPush for increased view performance. And we examine adding an index. ts file for each state folder to manage our selectors and state interfaces. Let's get started.

Final Words
As you have seen throughout this course, NgRx helps us actively manage our application state and clearly structure our component interactions. Welcome back to Angular NgRx: Getting Started from Pluralsight. My name is Deborah Kurata and the final words in this course include a brief recap, information about other NgRx libraries, and a few pointers to additional information. Let's jump right in to this last module.