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