Update 10/8/2017. AngularFire v5 introduced breaking changes. For this tutorial to work in v5, you need to import the service from `angularfire2/database-deprecated`

Use Angular NgRx with the Firebase realtime database. In this episode, I show you how to apply Redux patterns and control side effects to retrieve and update data in the Firebase.  

Full Lesson: https://angularfirebase.com/lessons/firebase-with-angular-ngrx-redux/

Source Code: https://github.com/ngrx/platform/blob/master/docs/effects/README.md
Ngrx Effects: https://github.com/codediodeio/ngrx-fire
Firebase: https://firebase.google.com/
2024-02-04T08:09:39.958Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
798a8692-ed1a-47ca-8df1-cdd654301f20
948f45a6eb55603105eb566b33c85431a7ed493445050c2e75324ad0134d3e7b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In my last video, I showed you how to implement Redux patterns in Angular using NGRX store.
If you're brand new to Redux, I recommend checking out that video first if you haven't already.
If you're an AngularFirebase 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 NGRX.
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 n g r x Angular app that uses Firebase on the back end.
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 3rd party API.
N g r x 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 pure because it only affects data within its own scope.
It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module.
And the reducer is added to the store module.
Now before going any further, I wanna 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 state that's a Boolean, Then text, votes, and an optional error field.
Now we can start building the post actions.
We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states.
When we successfully retrieve a post, we can send that as the payload to update the data store.
Then 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, we'll 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 3 dots in front of them, and this will compose a new object from left to right.
When we first trigger the git post action, we'll 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.
Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax.
However, keep in mind it's just a proposal for ES 7 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 wanna perform.
In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this.
We get a 2 second delay and then the post data is updated in the data store reflecting in the UI.
Now let's build 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 to 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 action's vote fail which will set the optional error property on the data store to this error message.
Now let's actually put these effects to use in the App component.
We import ngrxstore as well as our post actions and post model.
Then the AppState interface will just be defined as the post.
And just like we did in the last video, we'll set the post as an 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 wanna set the votes at.
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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote.
In a real app, you probably wanna have some way to validate that a vote belongs to a user.
But in this case, I just wanna show you how to actually make the update in Firebase.
You can see when we click the upvote or downvote button, Firebase is being updated over here on the right.
And we're observing the actual data in the Data Store so it's completely decoupled from Firebase.
Face.
If you installed Redux DevTools 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 the 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 ngrxfx with Firebase.
If this video helped you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
You'll get a free copy of my book As well as 1 on 1 project consulting.
Thanks for watching and I'll see you soon.

Speaker 0: In my last video, I showed you how to implement Redux patterns in Angular using NGRX store. If you're brand new to Redux, I recommend checking out that video first if you haven't already. If you're an AngularFirebase 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 NGRX. 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 n g r x Angular app that uses Firebase on the back end.

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 3rd party API. N g r x 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 pure because it only affects data within its own scope. It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module. And the reducer is added to the store module. Now before going any further, I wanna 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 state that's a Boolean, Then text, votes, and an optional error field. Now we can start building the post actions. We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states. When we successfully retrieve a post, we can send that as the payload to update the data store. Then 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, we'll 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 3 dots in front of them, and this will compose a new object from left to right. When we first trigger the git post action, we'll 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. Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax.

However, keep in mind it's just a proposal for ES 7 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 wanna perform. In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this. We get a 2 second delay and then the post data is updated in the data store reflecting in the UI.

Now let's build 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 to 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 action's vote fail which will set the optional error property on the data store to this error message. Now let's actually put these effects to use in the App component.

We import ngrxstore as well as our post actions and post model. Then the AppState interface will just be defined as the post. And just like we did in the last video, we'll set the post as an 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 wanna set the votes at. 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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote.

In a real app, you probably wanna have some way to validate that a vote belongs to a user. But in this case, I just wanna show you how to actually make the update in Firebase. You can see when we click the upvote or downvote button, Firebase is being updated over here on the right. And we're observing the actual data in the Data Store so it's completely decoupled from Firebase. Face.

If you installed Redux DevTools 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 the 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 ngrxfx with Firebase. If this video helped you, please like and subscribe.

And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book As well as 1 on 1 project consulting. Thanks for watching and I'll see you soon.
In my last video, I showed you how to implement Redux patterns in Angular using NGRX store. If you're brand new to Redux, I recommend checking out that video first if you haven't already. If you're an AngularFirebase 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 NGRX. 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 n g r x Angular app that uses Firebase on the back end. 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 3rd party API. N g r x 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 pure because it only affects data within its own scope. It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module.
databases
And the reducer is added to the store module.
Now before going any further, I wanna 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.
modeling
The push key will be the actual Firebase push key and then we'll have a loading state that's a Boolean, Then text, votes, and an optional error field. Now we can start building the post actions. We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states. When we successfully retrieve a post, we can send that as the payload to update the data store. Then we'll follow the same basic process for all the other actions.
voting
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, we'll 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 3 dots in front of them, and this will compose a new object from left to right.
When we first trigger the git post action, we'll 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. Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax. However, keep in mind it's just a proposal for ES 7 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.
voting
programming
animation
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 wanna perform.
operations
In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this.
We get a 2 second delay and then the post data is updated in the data store reflecting in the UI. Now let's build 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.
voting
elections
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 to 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 action's vote fail which will set the optional error property on the data store to this error message. Now let's actually put these effects to use in the App component.
voting
elections
We import ngrxstore as well as our post actions and post model. Then the AppState interface will just be defined as the post. And just like we did in the last video, we'll set the post as an 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 wanna set the votes at. 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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote. In a real app, you probably wanna have some way to validate that a vote belongs to a user. But in this case, I just wanna show you how to actually make the update in Firebase. You can see when we click the upvote or downvote button, Firebase is being updated over here on the right.
voting
elections
And we're observing the actual data in the Data Store so it's completely decoupled from Firebase. Face. If you installed Redux DevTools 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 the 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 ngrxfx with Firebase. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book As well as 1 on 1 project consulting. Thanks for watching and I'll see you soon.
streaming
podcasts
seasons
In my last video, I showed you how to implement Redux patterns in Angular using NGRX store. If you're brand new to Redux, I recommend checking out that video first if you haven't already. If you're an AngularFirebase 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 NGRX. 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 n g r x Angular app that uses Firebase on the back end. 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 3rd party API. N g r x 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 pure because it only affects data within its own scope. It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module. And the reducer is added to the store module. Now before going any further, I wanna 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 state that's a Boolean, Then text, votes, and an optional error field. Now we can start building the post actions. We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states. When we successfully retrieve a post, we can send that as the payload to update the data store. Then 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, we'll 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 3 dots in front of them, and this will compose a new object from left to right. When we first trigger the git post action, we'll 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. Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax. However, keep in mind it's just a proposal for ES 7 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 wanna perform. In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this. We get a 2 second delay and then the post data is updated in the data store reflecting in the UI. Now let's build 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 to 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 action's vote fail which will set the optional error property on the data store to this error message. Now let's actually put these effects to use in the App component. We import ngrxstore as well as our post actions and post model. Then the AppState interface will just be defined as the post. And just like we did in the last video, we'll set the post as an 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 wanna set the votes at. 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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote. In a real app, you probably wanna have some way to validate that a vote belongs to a user. But in this case, I just wanna show you how to actually make the update in Firebase. You can see when we click the upvote or downvote button, Firebase is being updated over here on the right. And we're observing the actual data in the Data Store so it's completely decoupled from Firebase. Face. If you installed Redux DevTools 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 the 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 ngrxfx with Firebase. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book As well as 1 on 1 project consulting. Thanks for watching and I'll see you soon.
In
in
my
my
last
last
video,
video
I
i
showed
showed
you
you
how
how
to
to
implement
implement
Redux
redux
patterns
patterns
in
in
Angular
angular
using
using
NGRX
ngrx
store.
store
If
if
you're
you're
brand
brand
new
new
to
to
Redux,
redux
I
i
recommend
recommend
checking
checking
out
out
that
that
video
video
first
first
if
if
you
you
haven't
haven't
already.
already
If
if
you're
you're
an
an
AngularFirebase
angularfirebase
Pro
pro
member,
member
I'd
i'd
like
like
to
to
take
take
a
a
second
second
to
to
say
say
thank
thank
you
you
for
for
supporting
supporting
this
this
project
project
and
and
let
let
you
you
know
know
that
that
we're
we're
using
using
your
your
investment
investment
to
to
support
support
other
other
open
open
source
source
projects
projects
such
such
as
as
NGRX.
ngrx
I
i
pledged
pledged
$100
$100
per
per
month
month
and
and
will
will
do
do
the
the
same
same
for
for
other
other
exceptional
exceptional
Angular
angular
projects
projects
and
and
content
content
creators.
creators
Getting
getting
back
back
to
to
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
an
an
n
n
g
g
r
r
x
x
Angular
angular
app
app
that
that
uses
uses
Firebase
firebase
on
on
the
the
back
back
end.
end
We'll
we'll
be
be
able
able
to
to
retrieve
retrieve
as
as
well
well
as
as
update
update
post
post
on
on
the
the
Firebase
firebase
real
real
time
time
database.
database
When
when
working
working
with
with
Firebase,
firebase
we
we
have
have
to
to
worry
worry
about
about
the
the
side
side
effects
effects
that
that
come
come
with
with
working
working
with
with
a
a
3rd
3rd
party
party
API.
api
N
n
g
g
r
r
x
x
has
has
a
a
package
package
called
called
effects
effects
that
that
serves
serves
just
just
this
this
purpose.
purpose
We
we
can
can
install
install
it
it
using
using
npm.
npm
At
at
this
this
point,
point
you
you
should
should
have
have
AngularFire
angularfire
2
2
for
for
Firebase
firebase
installed.
installed
You
you
can
can
find
find
instructions
instructions
for
for
that
that
on
on
the
the
official
official
repo.
repo
Now
now
let's
let's
look
look
at
at
why
why
we
we
need
need
to
to
use
use
effects
effects
in
in
the
the
first
first
place.
place
Consider
consider
the
the
following
following
example
example
of
of
a
a
pure
pure
function.
function
It's
it's
considered
considered
pure
pure
because
because
it
it
only
only
affects
affects
data
data
within
within
its
its
own
own
scope.
scope
It
it
would
would
be
be
considered
considered
impure
impure
if
if
we
we
defined
defined
a
a
variable
variable
outside
outside
of
of
function
function
and
and
then
then
used
used
it
it
inside
inside
the
the
function
function
scope.
scope
What
what
often
often
happens
happens
in
in
the
the
real
real
world
world
is
is
we
we
have
have
an
an
impure
impure
function
function
that
that
will
will
do
do
an
an
operation
operation
on
on
the
the
database
database
causing
causing
a
a
chain
chain
of
of
different
different
side
side
effects
effects
in
in
the
the
application.
application
The
the
goal
goal
of
of
ngrxfx
ngrxfx
is
is
to
to
isolate
isolate
functions
functions
like
like
this
this
to
to
make
make
them
them
behave
behave
more
more
or
or
less
less
like
like
a
a
pure
pure
function.
function
Let's
let's
start
start
coding
coding
this
this
up
up
in
in
Angular
angular
in
in
the
the
app
app
module.
module
We're
we're
going
going
to
to
need
need
the
the
AngularFire
angularfire
database
database
as
as
well
well
as
as
the
the
effects
effects
module
module
store
store
and
and
store
store
dev
dev
tools.
tools
Then
then
we're
we're
going
going
to
to
create
create
our
our
own
own
post
post
effects
effects
and
and
post
post
reducer
reducer
in
in
the
the
upcoming
upcoming
steps.
steps
Post
post
effects
effects
behave
behave
just
just
like
like
an
an
Angular
angular
service,
service
So
so
when
when
we
we
import
import
them,
them
we
we
add
add
them
them
to
to
an
an
array
array
in
in
the
the
effects
effects
module.
module
And
and
the
the
reducer
reducer
is
is
added
added
to
to
the
the
store
store
module.
module
Now
now
before
before
going
going
any
any
further,
further
I
i
wanna
wanna
show
show
you
you
how
how
I
i
have
have
this
this
app
app
organized.
organized
I
i
have
have
a
a
folder
folder
for
for
actions,
actions
effects,
effects
models
models
and
and
reducers.
reducers
You'll
you'll
most
most
likely
likely
want
want
a
a
similar
similar
organization
organization
to
to
this
this
for
for
each
each
feature
feature
in
in
your
your
app.
app
Now
now
let's
let's
get
get
started
started
building
building
the
the
post
post
model.
model
This
this
will
will
just
just
be
be
a
a
simple
simple
TypeScript
typescript
interface
interface
that
that
defines
defines
the
the
post
post
itself.
itself
The
the
push
push
key
key
will
will
be
be
the
the
actual
actual
Firebase
firebase
push
push
key
key
and
and
then
then
we'll
we'll
have
have
a
a
loading
loading
state
state
that's
that's
a
a
Boolean,
boolean
Then
then
text,
text
votes,
votes
and
and
an
an
optional
optional
error
error
field.
field
Now
now
we
we
can
can
start
start
building
building
the
the
post
post
actions.
actions
We'll
we'll
start
start
by
by
importing
importing
the
the
action
action
interface
interface
from
from
ngrx
ngrx
and
and
also
also
the
the
post
post
model
model
that
that
we
we
just
just
created.
created
To
to
create
create
an
an
action,
action
we'll
we'll
first
first
export
export
a
a
constant
constant
with
with
the
the
action
action
name.
name
Then
then
we
we
create
create
a
a
class
class
that
that
will
will
handle
handle
the
the
data
data
payload
payload
for
for
that
that
action.
action
In
in
order
order
to
to
get
get
a
a
post
post
from
from
Firebase,
firebase
we
we
need
need
to
to
first
first
supply
supply
it
it
with
with
a
a
push
push
key
key
string,
string
which
which
we
we
can
can
do
do
by
by
supplying
supplying
it
it
in
in
the
the
constructor
constructor
for
for
this
this
action.
action
When
when
we
we
make
make
a
a
git
git
request
request
for
for
a
a
post,
post
it's
it's
asynchronous.
asynchronous
We
we
don't
don't
know
know
if
if
it's
it's
successful
successful
right
right
away.
away
So
so
we'll
we'll
create
create
another
another
action
action
called
called
get
get
post
post
success
success
that
that
will
will
fire
fire
once
once
the
the
post
post
is
is
actually
actually
successfully
successfully
retrieved.
retrieved
For
for
the
the
vote
vote
actions,
actions
which
which
are
are
conducted
conducted
with
with
a
a
Firebase
firebase
database
database
update,
update
we'll
we'll
do
do
a
a
success
success
and
and
a
a
fail
fail
action
action
to
to
handle
handle
those
those
2
2
possible
possible
states.
states
When
when
we
we
successfully
successfully
retrieve
retrieve
a
a
post,
post
we
we
can
can
send
send
that
that
as
as
the
the
payload
payload
to
to
update
update
the
the
data
data
store.
store
Then
then
we'll
we'll
follow
follow
the
the
same
same
basic
basic
process
process
for
for
all
all
the
the
other
other
actions.
actions
This
this
will
will
make
make
a
a
little
little
more
more
sense
sense
when
when
we
we
get
get
to
to
the
the
effects
effects
and
and
actually
actually
start
start
sending
sending
data
data
through
through
these
these
actions.
actions
The
the
final
final
step
step
is
is
to
to
export
export
all
all
these
these
classes
classes
as
as
a
a
single
single
type
type
so
so
we
we
can
can
strong
strong
type
type
them
them
when
when
we
we
get
get
to
to
the
the
effects.
effects
But
but
before
before
the
the
effects,
effects
we'll
we'll
build
build
the
the
reducer
reducer
function.
function
In
in
the
the
reducer
reducer
function,
function
we
we
will
will
import
import
the
the
post
post
actions
actions
we
we
just
just
created
created
as
as
well
well
as
as
the
the
post
post
model
model
we
we
created
created
earlier.
earlier
Then
then
we'll
we'll
set
set
the
the
post
post
actions
actions
as
as
a
a
single
single
action
action
type.
type
In
in
the
the
post
post
reducer,
reducer
we
we
pass
pass
the
the
state
state
and
and
the
the
action
action
as
as
arguments.
arguments
Then
then
to
to
copy
copy
the
the
old
old
state
state
to
to
the
the
new
new
state,
state
we're
we're
gonna
gonna
use
use
a
a
new
new
JavaScript
javascript
syntax
syntax
called
called
spread.
spread
First,
first
we
we
create
create
an
an
empty
empty
object
object
and
and
then
then
we
we
put
put
other
other
objects
objects
inside
inside
of
of
it
it
with
with
3
3
dots
dots
in
in
front
front
of
of
them,
them
and
and
this
this
will
will
compose
compose
a
a
new
new
object
object
from
from
left
left
to
to
right.
right
When
when
we
we
first
first
trigger
trigger
the
the
git
git
post
post
action,
action
we'll
we'll
set
set
the
the
loading
loading
state
state
to
to
true.
true
When
when
the
the
post
post
returns
returns
successfully,
successfully
we
we
can
can
add
add
the
the
action
action
payload
payload
to
to
the
the
object
object
And
and
also
also
flip
flip
the
the
loading
loading
state
state
to
to
false.
false
Then
then
we'll
we'll
follow
follow
the
the
same
same
basic
basic
logic
logic
for
for
the
the
vote
vote
actions,
actions
and
and
you
you
might
might
notice
notice
how
how
concise
concise
and
and
readable
readable
our
our
code
code
is
is
with
with
the
the
Bread
bread
syntax.
syntax
However,
however
keep
keep
in
in
mind
mind
it's
it's
just
just
a
a
proposal
proposal
for
for
ES
es
7
7
and
and
it's
it's
not
not
a
a
fully
fully
standardized
standardized
feature
feature
in
in
JavaScript
javascript
as
as
of
of
the
the
making
making
of
of
this
this
video.
video
Now
now
we
we
can
can
finally
finally
start
start
building
building
our
our
post
post
effects.
effects
Effects
effects
work
work
just
just
like
like
an
an
Angular
angular
service
service
so
so
we'll
we'll
use
use
the
the
injectable
injectable
decorator.
decorator
And
and
then
then
we'll
we'll
import
import
effects,
effects
actions
actions
as
as
well
well
as
as
the
the
AngularFire
angularfire
database
database
and
and
then
then
a
a
few
few
RxJS
rxjs
operators
operators
as
as
well
well
which
which
you'll
you'll
see
see
in
in
use
use
here
here
in
in
a
a
second.
second
And
and
lastly,
lastly
we'll
we'll
import
import
our
our
post
post
actions.
actions
The
the
first
first
step
step
is
is
to
to
add
add
the
the
actions
actions
as
as
well
well
as
as
the
the
AngularFire
angularfire
database
database
in
in
the
the
constructor.
constructor
Then
then
you
you
create
create
an
an
effect
effect
by
by
first
first
using
using
the
the
effect
effect
decorator.
decorator
Then
then
you
you
strong
strong
type
type
its
its
value
value
as
as
an
an
observable
observable
action.
action
Then
then
you
you
call
call
actions
actions
of
of
type
type
and
and
the
the
type
type
being
being
the
the
action
action
that
that
you
you
wanna
wanna
perform.
perform
In
in
this
this
case,
case
it'll
it'll
be
be
our
our
get
get
post
post
action.
action
In
in
this
this
case,
case
we
we
need
need
to
to
first
first
map
map
the
the
payload
payload
down
down
to
to
something
something
that
that
we
we
can
can
use.
use
Since
since
we've
we've
strong
strong
typed
typed
all
all
our
our
actions,
actions
we
we
can
can
just
just
map
map
it
it
down
down
to
to
the
the
action
action
type
type
for
for
git
git
post.
post
In
in
this
this
case,
case
the
the
payload
payload
we're
we're
sending
sending
it
it
is
is
a
a
Firebase
firebase
push
push
key
key
that
that
we
we
can
can
use
use
to
to
retrieve
retrieve
the
the
post
post
from
from
the
the
database.
database
In
in
this
this
example,
example
I'm
i'm
using
using
an
an
RX
rx
JS
js
delay
delay
of
of
2
2
seconds
seconds
just
just
to
to
show
show
the
the
spinner
spinner
in
in
the
the
UI.
ui
That's
that's
not
not
necessary
necessary
in
in
real
real
life.
life
So
so
now
now
we
we
can
can
use
use
merge
merge
map
map
to
to
take
take
that
that
Payload
payload
of
of
the
the
Firebase
firebase
push
push
key
key
to
to
send
send
the
the
actual
actual
get
get
request
request
to
to
Firebase.
firebase
We
we
call
call
d
d
b
b
object
object
payload
payload
And
and
then
then
we
we
map
map
that
that
down
down
to
to
the
the
post
post
that
that
it
it
returns
returns
and
and
then
then
we
we
can
can
actually
actually
update
update
the
the
state
state
in
in
the
the
DataStore.
datastore
And
and
we
we
can
can
do
do
that
that
by
by
just
just
returning
returning
the
the
post
post
actions
actions
Get
get
post
post
success.
success
When
when
we
we
trigger
trigger
this
this
action
action
in
in
the
the
front
front
end,
end
it's
it's
going
going
to
to
look
look
something
something
like
like
this.
this
We
we
get
get
a
a
2
2
second
second
delay
delay
and
and
then
then
the
the
post
post
data
data
is
is
updated
updated
in
in
the
the
data
data
store
store
reflecting
reflecting
in
in
the
the
UI.
ui
Now
now
let's
let's
build
build
another
another
effect
effect
to
to
handle
handle
the
the
voting
voting
action.
action
It's
it's
the
the
same
same
basic
basic
process
process
to
to
start,
start
but
but
this
this
time
time
it'll
it'll
be
be
a
a
type
type
of
of
vote
vote
update.
update
Then
then
we'll
we'll
map
map
it
it
down
down
to
to
the
the
payload
payload
just
just
like
like
we
we
did
did
with
with
the
the
last
last
effect.
effect
But
but
the
the
difference
difference
is
is
when
when
you
you
do
do
a
a
Firebase
firebase
update,
update
it's
it's
not
not
actually
actually
an
an
observable,
observable
rather
rather
it's
it's
a
a
promise.
promise
But
but
we
we
can
can
treat
treat
it
it
like
like
an
an
observable
observable
by
by
putting
putting
it
it
inside
inside
the
the
of
of
operator.
operator
Then
then
we
we
can
can
simply
simply
make
make
the
the
update
update
call
call
to
to
Firebase
firebase
like
like
we
we
would
would
normally
normally
by
by
calling
calling
DB
db
object
object
with
with
the
the
push
push
key.
key
And
and
then
then
we'll
we'll
update
update
the
the
votes
votes
to
to
the
the
new
new
value
value
specified
specified
in
in
the
the
payload.
payload
Then
then
we
we
can
can
map
map
the
the
observable
observable
to
to
the
the
vote
vote
success
success
action.
action
And
and
if
if
there's
there's
an
an
error,
error
we
we
can
can
catch
catch
it
it
and
and
trigger
trigger
the
the
post
post
action's
action's
vote
vote
fail
fail
which
which
will
will
set
set
the
the
optional
optional
error
error
property
property
on
on
the
the
data
data
store
store
to
to
this
this
error
error
message.
message
Now
now
let's
let's
actually
actually
put
put
these
these
effects
effects
to
to
use
use
in
in
the
the
App
app
component.
component
We
we
import
import
ngrxstore
ngrxstore
as
as
well
well
as
as
our
our
post
post
actions
actions
and
and
post
post
model.
model
Then
then
the
the
AppState
appstate
interface
interface
will
will
just
just
be
be
defined
defined
as
as
the
the
post.
post
And
and
just
just
like
like
we
we
did
did
in
in
the
the
last
last
video,
video
we'll
we'll
set
set
the
the
post
post
as
as
an
an
observable
observable
and
and
we'll
we'll
inject
inject
the
the
Store
store
in
in
the
the
constructor.
constructor
Now
now
all
all
we
we
have
have
to
to
do
do
is
is
create
create
a
a
couple
couple
event
event
handlers
handlers
that
that
will
will
trigger
trigger
these
these
actions.
actions
To
to
get
get
a
a
post
post
from
from
Firebase
firebase
I'm
i'm
just
just
going
going
to
to
hard
hard
code
code
a
a
push
push
key
key
that
that
already
already
exists
exists
in
in
the
the
database.
database
Then
then
to
to
update
update
the
the
votes
votes
I'm
i'm
going
going
to
to
pass
pass
The
the
existing
existing
post
post
object
object
along
along
with
with
the
the
new
new
value
value
we
we
wanna
wanna
set
set
the
the
votes
votes
at.
at
Then
then
we
we
can
can
dispatch
dispatch
the
the
action
action
and
and
pass
pass
it
it
the
the
post
post
and
and
the
the
new
new
value
value
for
for
the
the
votes.
votes
In
in
the
the
app
app
component
component
HTML,
html
we
we
just
just
need
need
to
to
unwrap
unwrap
the
the
post
post
observable
observable
and
and
then
then
we
we
can
can
bind
bind
everything
everything
to
to
buttons
buttons
that
that
we
we
need
need
to
to
trigger
trigger
the
the
get
get
post
post
as
as
well
well
as
as
the
the
vote
vote
update
update
action.
action
And
and
then
then
we
we
also
also
display
display
a
a
loading
loading
spinner
spinner
conditionally
conditionally
if
if
the
the
post
post
is
is
loading.
loading
To
to
distinguish
distinguish
an
an
upvote
upvote
from
from
a
a
downvote,
downvote
we
we
just
just
pass
pass
the
the
number
number
1
1
or
or
the
the
number
number
negative
negative
one
one
if
if
it's
it's
a
a
downvote.
downvote
In
in
a
a
real
real
app,
app
you
you
probably
probably
wanna
wanna
have
have
some
some
way
way
to
to
validate
validate
that
that
a
a
vote
vote
belongs
belongs
to
to
a
a
user.
user
But
but
in
in
this
this
case,
case
I
i
just
just
wanna
wanna
show
show
you
you
how
how
to
to
actually
actually
make
make
the
the
update
update
in
in
Firebase.
firebase
You
you
can
can
see
see
when
when
we
we
click
click
the
the
upvote
upvote
or
or
downvote
downvote
button,
button
Firebase
firebase
is
is
being
being
updated
updated
over
over
here
here
on
on
the
the
right.
right
And
and
we're
we're
observing
observing
the
the
actual
actual
data
data
in
in
the
the
Data
data
Store
store
so
so
it's
it's
completely
completely
decoupled
decoupled
from
from
Firebase.
firebase
Face.
face
If
if
you
you
installed
installed
Redux
redux
DevTools
devtools
in
in
the
the
last
last
video,
video
you'll
you'll
be
be
able
able
to
to
get
get
a
a
nice
nice
tree
tree
presentation
presentation
of
of
the
the
state
state
as
as
it
it
changes.
changes
So
so
first
first
we
we
have
have
a
a
blank
blank
state,
state
Then
then
it
it
goes
goes
to
to
the
the
loading
loading
state
state
and
and
then
then
the
the
post
post
data
data
is
is
loaded
loaded
and
and
each
each
time
time
we
we
vote,
vote
we
we
get
get
a
a
new
new
state
state
tree.
tree
As
as
your
your
app
app
grows
grows
more
more
complex,
complex
This
this
can
can
be
be
extremely
extremely
helpful
helpful
for
for
debugging.
debugging
That's
that's
it
it
for
for
ngrxfx
ngrxfx
with
with
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
As
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to implement Redux patterns in Angular using NGRX store and mentions a project using NGRX for NGRX. They also explain how to build an app using the Angular queries and post module, including the use of effects and post reducers. The process of building a post includes importing action interface and creating a post model, and they also discuss updating the state in the DataStore and import the concept-store and post actions. They also mention a free copy of their book and a one-time project consulting event.
Angular Ngrx Effects with Firebase Database
In my last video, I showed you how to implement Redux patterns in Angular using NGRX store. If you're brand new to Redux, I recommend checking out that video first if you haven't already. If you're an AngularFirebase 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 NGRX. 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 n g r x Angular app that uses Firebase on the back end. 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 3rd party API. N g r x 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 pure because it only affects data within its own scope. It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module. And the reducer is added to the store module. Now before going any further, I wanna 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 state that's a Boolean, Then text, votes, and an optional error field. Now we can start building the post actions. We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states. When we successfully retrieve a post, we can send that as the payload to update the data store. Then 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, we'll 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 3 dots in front of them, and this will compose a new object from left to right. When we first trigger the git post action, we'll 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. Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax. However, keep in mind it's just a proposal for ES 7 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 wanna perform. In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this. We get a 2 second delay and then the post data is updated in the data store reflecting in the UI. Now let's build 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 to 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 action's vote fail which will set the optional error property on the data store to this error message. Now let's actually put these effects to use in the App component. We import ngrxstore as well as our post actions and post model. Then the AppState interface will just be defined as the post. And just like we did in the last video, we'll set the post as an 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 wanna set the votes at. 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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote. In a real app, you probably wanna have some way to validate that a vote belongs to a user. But in this case, I just wanna show you how to actually make the update in Firebase. You can see when we click the upvote or downvote button, Firebase is being updated over here on the right. And we're observing the actual data in the Data Store so it's completely decoupled from Firebase. Face. If you installed Redux DevTools 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 the 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 ngrxfx with Firebase. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book As well as 1 on 1 project consulting. Thanks for watching and I'll see you soon.
The speaker explains how to implement Redux patterns in Angular using NGRX store and mentions a project using NGRX for NGRX. They also explain how to build an app using the Angular queries and post module, including the use of effects and post reducers. The process of building a post includes importing action interface and creating a post model, and they also discuss updating the state in the DataStore and import the concept-store and post actions. They also mention a free copy of their book and a one-time project consulting event.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular Ngrx Effects with Firebase Database 
        and a small summary : The speaker explains how to implement Redux patterns in Angular using NGRX store and mentions a project using NGRX for NGRX. They also explain how to build an app using the Angular queries and post module, including the use of effects and post reducers. The process of building a post includes importing action interface and creating a post model, and they also discuss updating the state in the DataStore and import the concept-store and post actions. They also mention a free copy of their book and a one-time project consulting event.
        [/INST]
        
        Generate the video : In my last video, I showed you how to implement Redux patterns in Angular using NGRX store. If you're brand new to Redux, I recommend checking out that video first if you haven't already. If you're an AngularFirebase 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 NGRX. 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 n g r x Angular app that uses Firebase on the back end. 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 3rd party API. N g r x 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 pure because it only affects data within its own scope. It would be considered impure if we defined a variable outside of 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 ngrxfx 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 AngularFire 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 in the effects module. And the reducer is added to the store module. Now before going any further, I wanna 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 state that's a Boolean, Then text, votes, and an optional error field. Now we can start building the post actions. We'll start by importing the action interface from ngrx 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 the 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 git 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, we'll do a success and a fail action to handle those 2 possible states. When we successfully retrieve a post, we can send that as the payload to update the data store. Then 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, we'll 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 3 dots in front of them, and this will compose a new object from left to right. When we first trigger the git post action, we'll 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. Then we'll follow the same basic logic for the vote actions, and you might notice how concise and readable our code is with the Bread syntax. However, keep in mind it's just a proposal for ES 7 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 wanna perform. In this case, it'll be our 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 git 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 RX JS delay of 2 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 d b 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 in the front end, it's going to look something like this. We get a 2 second delay and then the post data is updated in the data store reflecting in the UI. Now let's build 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 to 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 action's vote fail which will set the optional error property on the data store to this error message. Now let's actually put these effects to use in the App component. We import ngrxstore as well as our post actions and post model. Then the AppState interface will just be defined as the post. And just like we did in the last video, we'll set the post as an 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 wanna set the votes at. 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 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 downvote, we just pass the number 1 or the number negative one if it's a downvote. In a real app, you probably wanna have some way to validate that a vote belongs to a user. But in this case, I just wanna show you how to actually make the update in Firebase. You can see when we click the upvote or downvote button, Firebase is being updated over here on the right. And we're observing the actual data in the Data Store so it's completely decoupled from Firebase. Face. If you installed Redux DevTools 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 the 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 ngrxfx with Firebase. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. You'll get a free copy of my book As well as 1 on 1 project consulting. Thanks for watching and I'll see you soon.
        