Learning NgRx

Learning NgRx

1h 13mIntermediate2018-08-03

Authors

Alain R. Chautard

Alain R. Chautard

Google Developer Expert in web technologies and Angular

Course details

Once you've worked with Angular awhile, you discover that the difficult part of architecting apps is making sure data flows and is refreshed in the UI in a consistent way. This process is called state management. NgRx has quickly become the go-to solution for state management in large Angular applications. In this training course, you can learn about Redux—the JavaScript library for managing application state—and how NgRx provides an Angular-specific implementation of Redux that supports lazy-loaded modules, observables, and asynchronous side effects. Instructor Alain Chautard teaches the principles of state management in the context of reactive programming, giving you a solid foundation for your Angular architecture. Learn how to react to and trigger state changes, dispatch actions, and work with effects, selectors, and entities. Plus, see to build a robust component architecture with NgRx.

Learning objectives
State management basics: State, actions, reducers, and the NgRx store
Describing state
Dispatching actions
Listening to state updates
Effects
Debugging
Selector functions
Entities
Component architecture

Skills covered

AngularFull-Stack Web DevelopmentFront-End Web DevelopmentLearningWeb DevelopmentOpen Source

Concepts

Introduction

  • Improve your Angular architecture with NgRx
  • What you should know

Redux and State Management

  • What is state management all about
  • Core concepts - State and actions
  • Core concepts - Reducers and store
  • Challenge - Brainstorm state and actions for a weather app
  • Solution - Short video

Introduction to NgRx

  • Describing state with NgRx
  • Actions with NgRx
  • Reducers in NgRx
  • The NgRx store - Dispatch an action
  • The NgRx store - Listen to state updates
  • Set up effects for asynchronous tasks
  • Implementation of effects
  • Challenge - Complete the code in the project to remove a zip code from the list
  • Solution - Source code with comments

Advanced NgRx

  • Debugging NgRx applications
  • Using selector functions
  • The NgRx router store
  • Entities to manage record collections
  • Challenge - Use NgRx to load forecast data
  • Solution - Source code with comments

Component Architecture

  • Overview of component architecture with NgRx
  • Component architecture in action

Conclusion

  • Next steps
40,000 Toman