Angular Ngrx Effects with Firebase Database

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.

[ZamatoElite]

I'm making that leap from beginner to intermediate, and your written and video tuts have been a life saver.

[melpacheco]

Great video!!! love when there are multiple videos that build on each other. if any one reading this is not a pro member, you need to be, best deal in town. great community, great lessons.

[RezaRahmati]

I have a feedback about whole series of videos, these videos are supposed to be tutorial and most of the time it's new concept for viewer, but most of the video codes are paste into editor, and you don't give enough time for viewer to digest the concept and learn, while if you stop pasting and use typing this will give enough time to viewer to observe and learn

[WayneStidolph]

*very* nice - although I have to pause the video to read the code to keep up :) Two related questions I hope you'll get to in future videos - (1) why no GET_POST_FAIL action (suppose the pushkey doesn't exist); and, (2) how would you handle a timeout (e.g., lost connectivity)?

[ThomasBurleson]

Really excellent video and tutorial. Love this!

[ChatGTA]

Awesome tutorial! Very clear and concise

[DJDrex]

I noticed your update, but is Firestore/angularfire5 going to change how this will work entirely? or better, should I wait for a new tutorial? I picked an interesting time to learn angular with firebase.

[xboothalingam]

Started using Redux for Angular after your previous video. I was looking for a way to connect to firebase. Bingo! Here it is. Doubt - How do I invoke multiple redux actions when one event is triggered? I am using a service currently which is complex and not advisable as far as i've read .Love your videos by the way!!

[WayneRiesterer]

Hi Jeff. Do you have or know of any tutorials that cover this using NGXS? I'm currently watching a few collections for snapshot changes and would like to directly wire these up to some state. I've got it to work by calling a service that returns a document array Observable, but then I subscribe to the Observable in ngxsOnInit and patch the state and I'm not 100% sure if this is the best way to go.

[avoerman]

Where do you actually DI your effects?

[Siddiskongen]

GET_POST. Lol. Not confusion naming at all. Is it to get a post request or post a get request :p

[anupbid]

Suppose I have a registration form, and I use ngrx reducer and effects to do http call to server to save the new user but when everything is successful I want to reset the form. How can I do it.. plz suggest some ways.. thanks in advance.

[TM-xphd]

Learning these concepts is really painful. I'm toggling back and forth between Todd Mottos series and this series, and it all makes little sense to me

[danishex]

In post.effects file following line mergeMap(payload => this.db.object(payload)) is showing below error .

AngularFireObject<{}>' is not assignable to parameter of type '(v alue: string, index: number) => ObservableInput<{}>'.

[MiuBrothersOfficial]

Is doing this.store.dispatch(new in the video best practice?

Why is it 'new'ing up everytime? Why not pass a constant string to the dispatch? (thats what I currently do)

[xboothalingam]

Hi again! I have a suggestion for video. Could you make a video on how to make angular apps more progressive. Thanks.

[mohamedmubarak]

Is that you on the Firebase profile pic? 😁

[patrickwilliams]

what's the program you're using on the right at the beginning of the video?

[camilotabares]

I just had a error with map function of observables, turns out the Rxjs change with A6 updates:

[kamalsahmoud]

Get this error :

ERROR in src/app/store/effects/post.effects.ts(19, 50): error TS2339: Property 'payload' does not exist on type 'GetPost'.
src/app/store/effects/post.effects.ts(21, 15): error TS2345: Argument of type '(payload: any) => AngularFireObject<{}>' is not assignable to parameter of type '(value: any, index: number) => ObservableInput<{}>'.
Type 'AngularFireObject<{}>' is not assignable to type 'ObservableInput<{}>'.
Type 'AngularFireObject<{}>' is not assignable to type 'ArrayLike<{}>'.
Property 'length' is missing in type 'AngularFireObject<{}>'.