NgRx + Firestore

Key Takeaways

a few weeks ago I showed you how to use ng rx entity adapt Paris today I'm going to build on this concept and show you how to use fire store as a persistent back-end data source you might be aware that angular fire version 5 has a new state changes method which we're going to take advantage of in this episode it makes it possible to keep track of when documents are added modified or removed if you want an example of how this might be used look no further than the firebase console itself if we add a new value to the database you'll see it flashes green first one second and the document itself is modified so it flashes orange if we remove the property then it flashes red the fire store web console happens to be built with ng rx which I learned by watching angular air episode 135 so make sure to check that out as well if you're new here click the subscribe button and follow along with the source code at angular firebase comm to get started I'm going to first show you how we have this app setup based on the previous video starting with the app module the main change we made is we installed angularfire 2 along with firestorm I'm also including the ng RX effects module and in the root just passing it an empty array if you're lost at this point make sure to go back and watch the ng RX entity video from there I'm going to go into our pizza feature module and I have a new file called pizza effects that we're going to create later we also import the effects module here but call for feature and pass it the pizza effects file the actual app we're building is just a collection of pizzas and the user has the ability to asynchronously update them from a status of cooking to delivered the thing that's interesting is that this app is going to listen for the state changes coming from angularfire 2 and then use entity adapters to update the local data store currently I've queried all the pizzas that have a status of cooking so if the status changes from anything other than cooking it should be removed from our local data store if we update the status from cooking to delivered you'll see that it gets removed from the local data store and that action is triggered here and redux dev tools the key takeaway here is that you'll always know how your data is changing relative to the way you queried it from firestore let's go ahead and setup the ng RX actions that make this possible the first action is query eventually it's going to make a query to Phi store and listen to any changes that happen to that data and from there we're going to set up added modified and removed it's important that you keep these names consistent because they're returned to us from angularfire - I also want to show you how to update data on a fire store document so we'll set up actions for update and success each of these actions will have a class that implements the action interface and has a custom payload that we defined in the constructor the query action doesn't need a payload but the added action will return an individual Pizza object so we can type that to our pizza interface then modified and removed we'll also follow the same exact pattern they simply create a payload of a pizza object the update action is a little more interesting it's going to take an entity ID as well as a partial piece of data that we want to update on the interface normally typescript wouldn't let us do this but we can use the partial type with our Pizza interface to update individual properties on the object the success action is only used to show us when a successful update operation has been completed so there's no need to add a payload to it then the final step is to export all these actions as a single type now we're going to jump into the reducer and I'll go through the whole thing from top to bottom so first we're gonna import the actions we just created as well as a few things here from ng rx then we'll define our pizza interface which just has an ID a size and a status which can either be cooking or delivered then we can use this interface to initialize our adaptor this will give us access to a bunch of helper methods to update the state consistently from there we use entity state to extend the main state interface this ensures that our data conforms to a specific format for entity and if you have some initial data you want to set as the initial state you would do that here but for now I'm just going to leave it blank now we're ready to build the reducer function it takes the old state as well as the action that's being dispatched which will be one of our pizza actions and then we'll set up the switch statement here and the first one we'll look for is added so whenever we get a new item that's added we're going to add one pizza to the state that will add one new pizza to the stay and keep track of its ID and everything automatically for modified will call update 1 then pass it the entity ID as well as that changes that we want to make then the same basic idea for removed but this time we'll call remove 1 and it takes the ID as the argument with just these three actions in the reducer we can throw around all kinds of different asynchronous events while providing a ton of feedback about our local data store that last step is to create the selectors that allow us to slice various pieces of the state that's done by calling create feature selector and then ng our X gives us a bunch of built-in helper methods or you can create your own to slice different pieces of the state in this demo we're only going to be using and select all now we're ready to build the ng rx effect the effect will allow us to isolate asynchronous events so we don't have to actually trigger those events from inside a component in other words component should only dispatch events and select parts of the store they shouldn't cause any asynchronous side effects on their own we're also going to be using the new ledyba operators from rxjs five point five so that imports syntax is slightly different as you see here the first thing I'm going to do is inject the actions as well as the angularfire store library in the constructor the most important effect here is query and that's going to make the query to fire store for collection and handle the added modified removed events that come from that collection so first we call actions of type with the query action that returns in observable so we can pipe multiple rxjs operators here which will make our code more readable than it has been in previous tutorials that i've shown you about ng RX effects the next step is to make a query to fire store so we do that by calling angular fire store collection and then we're going to only query the pizzas that have a status of cooking then to get an ng rx friendly observable from fire store we call state changes that returns an array of actions so we'll map that down to each individual action by calling merge map then we can dispatch the correct action based on what's returned from fire store so we'll call pizza with the action type which will be added modified or removed and then the payload will be the actual data that we update on the cool store we want both the data and the document ID so we can map those together here in the object that's all there is to it your local data store will now stay in sync with the data in firebase and you'll have a lot of flexibility for managing those changes but we're not quite done yet I still want to set up one more effect so the user can manually update data in fire store this time we're going to listen to the update action and when that occurs will map it down to that data payload that has the document ID as well as the data that we want to update from that point we call switch map and then with the data that we want to update we'll make a reference to that pizza in fire store then the update action is going to return a promise so we're going to create an observable from that promise to take care of that you can do observable from promise and then make the update inside of it and lastly we'll map that down to the success action once that promise resolves successfully it also be a good idea to catch errors here and dispatch an error action but I'm skipping that part for now we're almost done at this point we just need a component for the end user to interact with we'll go ahead and import ng rx store as well as the actions and reducer that we just created then our actual observable will be an array of pizzas the store is injected in the constructor and it's typed to our pizza interface we'll make the initial query during ng on an it but first we'll select the slice of the store we want for our pizzas variable after that all we have to do is dispatch the query action and our front end is going to have some buttons where the user can update the state of an individual pizza the update pizza method is an event handler that will bind to a button click and we can just dispatch the update action with the corresponding payload the HTML code is incredibly simple we just loop over the array of pizzas and then for each one we'll add that update status button clicking this button will trigger an asynchronous write operation which will update the pizza from a status of cooking to delivered now let's go into the app and take a closer look at what's actually happening here the initial page load pulls the data from fire store and then adds it to the state in the entity format if you look at the actions we first have a query pizzas action and we have for added events after that and of course that gives us four pizzas on the screen here as well now let's see what happens when we click the update status button we get three actions here first the update and then it's removed from the local store then update success after the actual update promise resolved so even though the pizza wasn't removed from fire store you still get the removed action because it was removed from the local store you could use that state change to toggle a CSS class or show a toast message or any other UI element you can imagine now let's take a look at one more thing what happens if we update a property on a pizza from fire store or any other client subscribing to this data you'll see down here in dev tools we get a modified action which tells us that the data on the pizza was updated but it still remains in our base query the end result is that you now have a system that will detect changes in fire store and tell you exactly how they affect your local ng rx store that's it for ng rx with angularfire - if this video helped you please like and subscribe and if you want to learn more every week consider becoming a pro subscriber at angular firebase comm you'll get access to exclusive content a free copy of my book as well as a bunch of other resources designed to help you get your app off the ground thanks for watching and I'll see you soon [Music] [Applause] [Music]