Angular Ngrx Effects with Firebase Database

in my last video I showed you how to implement Redux patterns and angular using ng rx store if you're brand new to redux I recommend checking out that video first if you haven't already if you're an angular firebase Pro member I'd like to take a second to say thank you for supporting this project and let you know that we're using your investment to support other open-source projects such as ng rx I pledged $100 per month and will do the same for other exceptional angular projects and content creators getting back to this episode we're going to build an ng rx angular app that uses firebase on the backend we'll be able to retrieve as well as update post on the firebase real-time database when working with firebase we have to worry about the side effects that come with working with a third party API ng Rx has a package called effects that serves just this purpose we can install it using NPM at this point you should have angularfire 2 for firebase installed you can find instructions for that on the official repo now let's look at why we need to use effects in the first place consider the following example of a pure function it's considered a pure because it only affects data within its own scope it would be considered impure if we defined a variable outside of that function and then used it inside the function scope what often happens in the real world is we have an impure function that will do an operation on the database causing a chain of different side effects in the application the goal of ng rx effects is to isolate functions like this to make them behave more or less like a pure function let's start coding this up in angular in the app module we're going to need the angular fired database as well as the effects module store and store dev tools then we're going to create our own post effects and post reducer in the upcoming steps post effects behave just like an angular service so when we import them we add them to an array and the effects module then the reducer is added to the store module now before going any further I want to show you how I have this app organized I have a folder for actions effects models and reducers you'll most likely want a similar organization to this for each feature in your app now let's get started building the post model this will just be a simple typescript interface that defines the post itself the push key will be the actual firebase push key and then we'll have a loading statements of bullion then text votes and an optional airfield now we can start building the post actions we'll start by importing the action interface from ng rx and also the post model that we just created to create an action we'll first export a constant with the action name then we create a class that will handle that data payload for that action in order to get a post from firebase we need to first supply it with a push key string which we can do by supplying it in the constructor for this action when we make a get request for a post it's asynchronous we don't know if it's successful right away so we'll create another action called get post success that will fire once the post is actually successfully retrieved for the Vote actions which are conducted with a firebase database update will do a success and a fail action to handle those two possible States when we successfully retrieve a post we can send that as the payload to update the data store and we'll follow the same basic process for all the other actions this will make a little more sense when we get to the effects and actually start sending data through these actions the final step is to export all these classes as a single type so we can strong type them when we get to the effects but before the effects will build the reducer function in the reducer function we will import the post actions we just created as well as the post model we created earlier then we'll set the post actions as a single action type in the post reducer we pass the state and the action as arguments then to copy the old state to the new state we're gonna use a new JavaScript syntax called spread first we create an empty object and then we put other objects inside of it with three dots in front of them and this will compose a new object from left to right when we first trigger the get post action will set the loading state to true when the post returns successfully we can add the action payload to the object and also flip the loading state to false and we'll follow the same basic logic for the vote actions and you might notice how concise and readable our code is with the spread syntax however keep in mind it's just a proposal for es7 and it's not a fully standardized feature in JavaScript as of the making of this video now we can finally start building our post effects effects work just like an angular service so we'll use the injectable decorator and then we'll import effects actions as well as the angularfire database and then a few rxjs operators as well which you'll see in use here in a second and lastly we'll import our post actions the first step is to add the actions as well as the angularfire database in the constructor then you create an effect by first using the effect decorator then you strong type its value as an observable action then you call actions of type and the type being the action that you want to perform in this case of OU BR get post action in this case we need to first map the payload down to something that we can use since we've strong typed all our actions we can just map it down to the action type for get post in this case the payload we're sending it is a firebase push key that we can use to retrieve the post from the database in this example I'm using an rxjs delay of two seconds just to show the spinner in the UI that's not necessary in real life so now we can use merge map to take that payload of the firebase push key to send the actual get request to firebase we call DB object payload and then we map that down to the post that it returns and then we can actually update the state in the datastore and we can do that by just returning the post actions get post success when we trigger this action on the front end it's going to look something like this we get a two second delay and then the post data is updated in the datastore reflecting in the UI now let's build a another effect to handle the voting action it's the same basic process to start but this time it'll be a type of vote update then we'll map it down to the payload just like we did with the last effect but the difference is when you do a firebase update it's not actually an observable rather it's a promise but we can treat it like an observable by putting it inside the of operator then we can simply make the update call the firebase like we would normally by calling DB object with the push key and then we'll update the votes to the new value specified in the payload then we can map the observable to the vote success action and if there's an error we can catch it and trigger the post actions vote fail which will set the optional error property on the datastore to this error message now let's actually put these effects to use in the app component we import ng rx store as well as our post actions and post model then the app state interface will just be defined as the post and just like we did in the last video we'll set the post isn't observable and we'll inject the store in the constructor now all we have to do is create a couple event handlers that will trigger these actions to get a post from firebase I'm just going to hard code a push key that already exists in the database then to update the votes I'm going to pass the existing post object along with the new value we want to set the votes at and then we can dispatch the action and pass it the post and the new value for the votes in the app component HTML we just need to unwrap the post observable and then we can bind everything to buttons that we need to trigger the get post action as well as the vote update action and then we also display a loading spinner conditionally if the post is loading to distinguish an upvote from a down boat we just pass it the number one or the number negative one if it's a down vote in a real app you probably want to have some way to validate that a boat belongs to a user but in this case I just want to show you how to actually make the update and firebase you can see when we click the upload or download button firebase is being updated over here on the right and we're observing the actual data in the datastore so it's completely decoupled from firebase if you installed Redux dev tools in the last video you'll be able to get a nice tree presentation of the state as it changes so first we have a blank state then it goes to the loading state and then post data is loaded and each time we vote we get a new state tree as your app grows more complex this can be extremely helpful for debugging that's it for ng rx effects with firebase if this video helped you please like and subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase comm looking a free copy of my book as well as one on one project consulting thanks for watching and I'll see you soon you [Music]

Channel: Fireship

Views: 32,864

Keywords: angular, angular 4, angular 2, firebase, webdev, app development, typescript, javascript, lesson, tutorial, ngrx, ngrx effects, ngrx firebase, redux firebase, redux angular firebase, ngrx tutorial, angular redux effects, redux effects

Id: 13nWhUndQo4

Length: 8min 56sec (536 seconds)

Published: Wed Aug 30 2017