One of the most common questions I get about redux and firebase is perhaps the most obvious one. 2
How do they work together. 3
How do we take firebase and connect it to a redux application. 4
This question gets more interesting the more you research the topic. 5
If you're using rebox chances are you're also using react. 6
Right. 7
So as soon as you type react and firebase into Google chances are you're going to land at re-act fire 8
which is the official binding of bindings between firebase and the library re-act this library is used 9
to directly inject data into your components. 10
This approach of course really flies in the face of redux which advocates a single store for all of 11
our application data. 12
So redux and firebase kind of seemed to be at odds. 13
Let's take a look at a diagram to illustrate why when we're using firebase to react. 14
Data is flowing directly from firebase into react fire and then into react and redux. 15
Over here on the far right hand side really has no idea what the current data insider application is 16
. 17
This is not the greatest approach. 18
Remember redux is supposed to be the source of truth for data inside of our application below here is 19
a little bit better flow. 20
Definitely one is more palatable. 21
In this case we have redox which is acting as an intermediary between firebase and react. 22
No so down here we're not making use of re-act fire at all. 23
Instead we're using firebase to inject data into our redux store which then passes data on to react 24
with this type approach. 25
Read redox the redux application can also make Ajax requests to whatever other third party out there 26
that we need to go fetch some relevant data. 27
So let's take a look at an application which is going to kind of illustrate this approach right here 28
where we have re-act talking to rebox and redox is solely acting as the middleman between firebase and 29
react. 30
So I've already got an application wired up and it's a kind of a Twitter or blog post or whatever you 31
might want to call it sort of application. 32
Very simple very straightforward. 33
I have a list of currently hard coded or client side posts on here. 34
I can delete a post if I want to. 35
I can also add a post. 36
So right now this is all client side data. 37
Nothing is being sent out to firebase we're not saving this to any exterior API. 38
Let's take a look at the code for the project. 39
Here's our action crater's file right now whenever someone calls the fetch post action creator we return 40
a very static list of posts right here so we can see the text. 41
One weird trick and bet you want to read this. 42
So those are the two static posts we saw when we refreshed the application. 43
So again everything right now is client side. 44
The reac side of the application isn't too interesting. 45
It's just a series of different components to show posts on the screen and calls them different action 46
creators and so they're not too relevant for our discussion right now. 47
What's really interesting or what's going to be interesting for application are these action creators 48
. 49
We need to somehow figure out how we are going to get data from our redux from firebase into our redux 50
application. 51
The interesting thing about this is how firebase and redux have a somewhat unaligned API. 52
Let's take a look at a diagram to illustrate that. 53
Redux works in a very well-defined or static fashion almost linear. 54
Of course we can have async action action creators but nonetheless the series in which we have these 55
different constructs tends to be pretty serial we call an action creator. 56
And usually that's going to happen by calling it directly from my react component an action creator 57
produces an action which flows into our reducers and then produces some new amount of application state 58
. 59
This is a very well-defined and well certainly well documented process of how to initiate a change or 60
introduce some amount of new data inside of our redux application. 61
Firebase on the other hand has a very different API with firebase we get access to what's called a firebase 62
ref or reference. 63
And this is a direct reference to some of our data that's sitting inside of the firebase database online 64
. 65
The firebase data or the firebase ref can over time emit a series of value events a value event is firebase 66
is way of telling us Hey I just received some new data over the wire. 67
So on the read side of things we have this very well documented colon action creator that produces in-action 68
flows into the reducers blah blah blah. 69
But on the firebase side we know this kind of wait and see approach where we set up this value handler 70
and then we just kind of twiddle our thumbs and wait for some new data to come across over the wire 71
. 72
So we need some means or some method to integrate these two libraries together. 73
These two very different ways of initiating changes inside of our application so of course we do have 74
a good solution. 75
Let's take a look at a diagram that's going to help explain it. 76
So this is how we're going to get the two libraries to work together. 77
We're going to take our firebase wrath and just stick it directly into an action creator. 78
Then whenever the firebase reference emits a value event which means some new data has come across over 79
the wire. 80
We're going to turn it into an action and send it off to our reducers. 81
So this first line right here signifies a valley event. 82
Evaluate events and a value event each value event is going to be turned into an action and we're going 83
to send that along or dispatch the action to all of our producers. 84
The producers are going to produce new applications state and our re-act application is then going to 85
render and display some data to our users. 86
So let's try this out in practice to demo this approach. 87
I'm going to take all the different action creators that I have inside of this existing simple application 88
which are fetched posts create post and delete posts and we're just going to replace these actual creators 89
with some firebase references and watch our application. 90
All of a sudden come to life in a very online interactive experience. 91
That sounds like quite a marketing marketing Vitt right there but let's give it a shot anyways. 92
So the first thing I'm going to do is import our firebase library from firebase. 93
So I've already installed this as a module next. 94
I've already we're no longer going to be using these lists of initial post right here. 95
Instead we're going to create our firebase reference so we're going to say posts is new firebase and 96
this right here is going to point to the very specific you are l for the application. 97
I've already created so you can notice that it's playing directly at S-B redux right here. 98
So this is our own little slice of data on firebase dotcom so we can now listen to this firebase reference 99
this posts for a value event and whenever that value event occurs we're going to get a snapshot a snapshot 100
is kind of a reference or a way of peeking into the firebase data store and seeing what records have 101
been loaded by firebase. 102
So let's write some code and talk about exactly what we're doing. 103
I'm going to first work on the fence post action creator. 104
So right now it was returning this very static list of posts that we just deleted. 105
Instead of doing that I'm going to return a function here. 106
So we're making use of redux thunked and we can certainly talk more about that later. 107
And I can say whenever I get a value event from firebase I'm going to take the snapshot that's provided 108
and I'm going to dispatch an action of type fetch posts and the payload is going to be snapshot. 109
Val snapshot snapshot Val is a Jason representation of whatever data was just loaded by firebase. 110
So here is what's going to happen when we first moved our application up. 111
We're going to call fecche post exactly one time. 112
That's going to return this function redux thung is going to invoke the function and pass the redux 113
dispatch method then whenever we get a value event from the Post's reference from firebase we're going 114
to instantly dispatch a new action of type fetch posts with a payload coming from the snapshot. 115
So let's give this a shot in the browser and see what happens in a refresh and we instantly get two 116
posts coming in and these are two existing posts I've already loaded up into firebase. 117
So looks like data is successfully coming into our application now. 118
But we still have to address how we create a post and we delete a post. 119
So let's handle both of these cases as well. 120
Let's start with the easier one which is delete post. 121
So whenever the delete posts action creators called a key or ID for the very particular record it is 122
passed in as an argument instead of just returning an action here of type. 123
Delete post. 124
We're going to replace this with another redux thung function and inside of here I'm going to find the 125
post with this very particular key and remove it. 126
Again this is a reference to our firebase reference. 127
So in our firebase reference find this very particular key and just remove it. 128
So now here's the real magic behind firebase. 129
When we remove this very particular post here we're going to automatically get a value event come across 130
the wire and the value event is going to contain the new list of posts which omits the one that we just 131
deleted. 132
So let's see what happens when test this out in the browser. 133
I'm going to refresh I get my list of posts lined up. 134
I'm going to delete one. 135
It goes away instantly. 136
I'm going to refresh again. 137
And I'm down to just one post. 138
So this is definitely working out pretty well. 139
Let's take care of the last case here. 140
The case of creating a post. 141
So we're going to take a near-identical approach as we did with posterchild child to remove. 142
But instead of removing we're instead going to push this post's remember that with firebase push right 143
here is not actually the array of prototype push that we get with javascript. 144
This is saying hey push this new bit of data into our database. 145
It's not quite the same as pushing onto an array. 146
So let's now give this a shot in the browser and flip back over refresh the page and let's say here's 147
a big cup of water. 148
I don't have a lot of existing or interesting posts to say anyways so let's create a post and it's instantly 149
added again. 150
The very interesting thing here is that we're not really doing anything to update our list of posts 151
. 152
All we're doing is drawing a new list of posts onto the pile. 153
Then the value event is triggered by the firebase reference that calls the our dispatch method and passes 154
a new action with the new list of posts into our redux reducers. 155
So this looks fantastic. 156
Let's do a quick recap. 157
The challenge of getting redux in firebase working together is twofold. 158
First firebase pushes their react Fahed react fire library as a solution for re-act applications which 159
is really inherently incompatible redux. 160
Second firebase depends on event based flow of data whereas redox is more about cause and effect. 161
We call an action creator to make a change on the application and we expect to see one predictable result 162
occur. 163
We melded these two libraries by using redux. 164
Thank you. 165
Using redux thunk. 166
Every time we get de-value then from our firebase reference we set a new action off to our reducers 167
that contained our new list of posts. 168
If you like this video I encourage you to comment or subscribe to get weekly webcasts on interesting 169
topics in the reactant javascript ecosystem. 170
Thanks for listening and I'll catch you in the next one.