1 00:00:02,100 --> 00:00:03,890 So now that we repeated 2 00:00:03,890 --> 00:00:05,990 these core Redux basics again, 3 00:00:05,990 --> 00:00:08,820 let's dive into some brand new content. 4 00:00:08,820 --> 00:00:11,350 And let's see how we can connect Redux 5 00:00:11,350 --> 00:00:15,070 with side effects and asynchronous code. 6 00:00:15,070 --> 00:00:18,090 Now for this, I'll continue using this basic application 7 00:00:18,090 --> 00:00:21,340 on which we worked, but now I wanna add a backend, 8 00:00:21,340 --> 00:00:24,440 a server to which we can send our cart. 9 00:00:24,440 --> 00:00:28,140 Because my idea is that whenever I edit the cart, 10 00:00:28,140 --> 00:00:31,990 because we add items or we reduce the quantity 11 00:00:31,990 --> 00:00:35,480 or remove items, whenever that happens 12 00:00:35,480 --> 00:00:38,470 I wanna send the request to a backend server 13 00:00:38,470 --> 00:00:42,240 to store that updated cart on the backend 14 00:00:42,240 --> 00:00:45,960 so that when we reload this front-end application, 15 00:00:45,960 --> 00:00:49,820 we can fetch that saved cart from the server, 16 00:00:49,820 --> 00:00:52,610 load it and display it here. 17 00:00:52,610 --> 00:00:54,840 That is my goal. 18 00:00:54,840 --> 00:00:57,010 Now for that as a backend, 19 00:00:57,010 --> 00:01:01,290 I will again use Firebase because it's the easy to use, 20 00:01:01,290 --> 00:01:04,120 no backend code required backend, 21 00:01:04,120 --> 00:01:06,110 which simply, well makes our life 22 00:01:06,110 --> 00:01:08,100 as a developer a bit easier. 23 00:01:08,100 --> 00:01:11,020 Of course, if you are a Node.js developer, 24 00:01:11,020 --> 00:01:13,750 you could also build your own backend API 25 00:01:13,750 --> 00:01:15,760 and send requests to that. 26 00:01:15,760 --> 00:01:18,320 But that's simply not the focus of this course, 27 00:01:18,320 --> 00:01:21,460 Node.js is a totally different topic. 28 00:01:21,460 --> 00:01:23,520 I got a dedicated course in this, 29 00:01:23,520 --> 00:01:25,370 this course is about react and start. 30 00:01:25,370 --> 00:01:28,140 So we will focus on that. 31 00:01:28,140 --> 00:01:30,140 So therefore I'm back on Firebase 32 00:01:30,140 --> 00:01:33,980 using that Firebase project I created earlier in the course. 33 00:01:33,980 --> 00:01:36,450 And there I have that time database 34 00:01:36,450 --> 00:01:38,740 where some data is already being stored 35 00:01:38,740 --> 00:01:41,870 from an earlier course section. 36 00:01:41,870 --> 00:01:44,180 Now I'm going to get rid of all that data 37 00:01:44,180 --> 00:01:45,630 because we don't need it here. 38 00:01:45,630 --> 00:01:48,780 And instead, now I'll use this backend here 39 00:01:48,780 --> 00:01:52,870 for my requests for this application. 40 00:01:52,870 --> 00:01:56,170 And now we've got a couple of different kinds of requests 41 00:01:56,170 --> 00:01:58,550 that should be sent to that backend. 42 00:01:58,550 --> 00:02:01,470 As I said, whenever the cart changes, 43 00:02:01,470 --> 00:02:03,980 I wanna update it on the backend. 44 00:02:03,980 --> 00:02:07,570 So whenever I add or remove items to or from the cart, 45 00:02:07,570 --> 00:02:10,080 I wanna update that backend. 46 00:02:10,080 --> 00:02:11,830 And when I reloaded the application, 47 00:02:11,830 --> 00:02:15,510 I wanna fetch my stored data from the backend. 48 00:02:15,510 --> 00:02:18,490 Because currently, if we add something to the cart, 49 00:02:18,490 --> 00:02:23,490 if we edit our cart, once I reload all that data is lost. 50 00:02:23,640 --> 00:02:26,720 Because currently we're not storing that cart anywhere. 51 00:02:26,720 --> 00:02:30,300 And that's exactly the kind of problem I wanna solve 52 00:02:30,300 --> 00:02:33,640 by storing it on that Firebase backend. 53 00:02:33,640 --> 00:02:36,630 But how do we now integrate that backend 54 00:02:36,630 --> 00:02:40,990 and the http requests that we need to send to that backend 55 00:02:40,990 --> 00:02:44,390 into our react application that uses Redux? 56 00:02:44,390 --> 00:02:46,130 How do we do that? 57 00:02:46,130 --> 00:02:47,240 Now keep in mind, 58 00:02:47,240 --> 00:02:52,110 reducers must be pure, side-effect free, and synchronous. 59 00:02:52,110 --> 00:02:55,920 So when we have any code that produces a side effect 60 00:02:55,920 --> 00:03:00,220 or is asynchronous like sending an http request, 61 00:03:00,220 --> 00:03:05,220 such code must not go into our reducer functions. 62 00:03:05,220 --> 00:03:08,640 So we can't send our http request 63 00:03:08,640 --> 00:03:11,580 inside of the reducers in our cart slides 64 00:03:11,580 --> 00:03:15,130 after we edited our state here. 65 00:03:15,130 --> 00:03:17,620 We can't go to the end of the reducer 66 00:03:17,620 --> 00:03:19,360 and then use the fetch API 67 00:03:19,360 --> 00:03:21,800 and send the request to the backend. 68 00:03:21,800 --> 00:03:24,918 This would totally be against the idea of Redux. 69 00:03:24,918 --> 00:03:26,680 It would be super bad 70 00:03:26,680 --> 00:03:29,530 and you must never do something like this. 71 00:03:29,530 --> 00:03:33,130 Don't perform a side effect inside of your reducer. 72 00:03:33,130 --> 00:03:35,960 No matter if it's synchronous or asynchronous, 73 00:03:35,960 --> 00:03:38,190 don't do it inside of the reducer. 74 00:03:38,190 --> 00:03:40,460 And never run any asynchronous code 75 00:03:40,460 --> 00:03:43,040 in the reducer in general. 76 00:03:43,040 --> 00:03:46,100 So we can send the http request here 77 00:03:46,100 --> 00:03:48,860 after we're done updating our state. 78 00:03:48,860 --> 00:03:51,176 Instead, when it comes to running such code, 79 00:03:51,176 --> 00:03:55,810 we have two main options where to put such code. 80 00:03:55,810 --> 00:03:58,310 We can execute it in the components, 81 00:03:58,310 --> 00:04:02,190 so we can simply ignore Redux if you wanna call it like this 82 00:04:02,190 --> 00:04:06,280 or we create something which is called the action creator 83 00:04:06,280 --> 00:04:09,070 which we only used indirectly thus far 84 00:04:09,070 --> 00:04:12,540 which also would allow us to run asynchronous code 85 00:04:12,540 --> 00:04:15,330 or generally any side effect code. 86 00:04:15,330 --> 00:04:18,083 These are our two main options. 87 00:04:18,960 --> 00:04:21,180 Now I wanna show you both options 88 00:04:21,180 --> 00:04:22,810 so that you see the differences 89 00:04:22,810 --> 00:04:25,943 and can make your own choice which option you prefer.