NgRx is a powerful library for organizing and managing state and interactions with that state in your Angular applications using the redux pattern. This course gets you started with NgRx including a store, actions, reducers, effects, and selectors.
At the core of state management in Angular is a thorough knowledge of the Redux pattern and the NgRx library. NgRx is a powerful library for organizing and managing state and interactions with the state in your Angular applications following the Redux pattern. In this course, Angular NgRx: Getting Started, you will learn the three principles of the Redux pattern that NgRx follows and the benefits this brings to your Angular applications. First, you will discover how to define a single store for all of your application state, access data from the store with selectors, dispatch actions using action creators, and process those actions with reducers to create new state. Next, you will explore how to handle side effects, such as asynchronous operations, with effects. Finally, you will learn how to architect your Angular applications for scale and performance using the container and presentational component patterns. When you are finished with this course, you will have a foundational knowledge of NgRx that will help you move forward to develop larger or more complex Angular application.
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.
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.