I've been working a lot recently with the Angular state management library ngr. I even wrote a blog post about setting up your Angular 2 project with ngrx/store and then a follow up post The Basics of"ngrx/effects", @Effect, and Async Middleware for "ngrx/store" in Angular 2. However, after taking a closer look at the official ngrx example project I learned a little trick that harnesses the power of TypeScript to make your coding experience even more fun and less error-prone.
0 Comments
I just went through a pretty embarasseing episode of fighting with a large codebase to figure out a bug, and it turned out in the end that the issues were being caused by improper use of the Object.assign method. In particular, I was using it to manage the state inside my reducer function in an ngrx store, and it was screwing with my whole app! I hope I can remember that you need to first pass in an empty object to Object.assign, and then you pass the object that you want to "assign onto" that empty object.
If you haven't already read my first post about setting up your angular 2 project with Ngrx/store then you should check that out first. In this post we will build on this state management architecture by learning about how to to think about asynchronous actions in the world of ngrx. We'll start with some simple examples and ultimately build up to @Effects that pull data from Firebase database. Let's get started!
I've been fiddling a lot lately with ngrx/store and managed to successfully implement it into a side project I've been working on. This post is just meant to be a refresher for me on how to take a boilerplate Angular project and add in state management with ngrx/store in case I need to this again (and ngrx/store is so awesome that I'm pretty sure I will be using it again. haha). Since this page is just publicly out there for anyone to see and you just so happened to stumble upon it, I guess you can use this post to add ngrx/store to your project too!
Sorry for the long title, but I just wanted to make it really clear what this post was going to be about. ;) In this post I'll basically show you how my straight-from-the-docs implementation for reading from the Firebase real-time database was resulting in a terribly slow-feeling user experience and how I was easily able to "make it work" once I had an understanding of how Angular 2, Zone.js, and Firebase (and asynchronous calls in general) are all interrelated in updating the DOM with the data in your typescript code.
|
AuthorThe posts on this site are written and maintained by Jim Lynch. About Jim...
Categories
All
Archives
March 2023
|