WEBVTT 1 00:00:00.320 --> 00:00:01.660 Hi and welcome back. 2 00:00:01.680 --> 00:00:04.200 Today I want to talk to you about redux logger 3 00:00:04.230 --> 00:00:06.530 that is a middleware for redux that logs 4 00:00:06.560 --> 00:00:09.700 actions and previous and next states to the console. 5 00:00:09.730 --> 00:00:13.380 This is going to be helpful for you to keep state of what actions are 6 00:00:13.410 --> 00:00:17.940 happening in your apps and how your state is changing according to that. 7 00:00:17.970 --> 00:00:23.460 So to do that we're going to need a logger for our redux. 8 00:00:23.490 --> 00:00:27.800 So let's go to the root of our project 9 00:00:28.320 --> 00:00:29.899 and then let's do 10 00:00:30.099 --> 00:00:32.220 npm install redux-logger 11 00:00:32.250 --> 00:00:33.980 it should be very quick. 12 00:00:34.000 --> 00:00:35.300 Yes, it's done. 13 00:00:35.320 --> 00:00:39.860 And then we're going to import this logger from redux logger. 14 00:00:39.890 --> 00:00:42.180 It doesn't need the source. Great. 15 00:00:42.210 --> 00:00:44.660 And now we're going to say that we need 16 00:00:44.680 --> 00:00:48.340 a new middleware that is going to get the default 17 00:00:48.370 --> 00:00:56.740 middleware and is going to return the default middleware plus our logger. 18 00:00:56.770 --> 00:01:02.200 So what's the issue here? 19 00:01:02.560 --> 00:01:05.540 We need function here. Great. 20 00:01:05.570 --> 00:01:08.460 And then what we're going to do is go back 21 00:01:08.490 --> 00:01:15.440 to our app or home file and I'm going to open up our terminal. 22 00:01:15.520 --> 00:01:17.410 Let's reload the application. 23 00:01:17.440 --> 00:01:19.100 I'm going to press this right now 24 00:01:19.120 --> 00:01:21.100 and you're going to see what's going to happen. 25 00:01:21.130 --> 00:01:24.340 So we have something happening here. 26 00:01:24.370 --> 00:01:28.780 Okay, so we have logged our previous state 27 00:01:28.810 --> 00:01:31.850 and it tells everything to us about the store. 28 00:01:31.880 --> 00:01:35.930 Okay. It says that we have a store user and its 29 00:01:35.960 --> 00:01:40.700 first name was Nata and last name was Vacheishvili and user ID was one. 30 00:01:40.730 --> 00:01:43.380 But then an action happened and we sent 31 00:01:43.410 --> 00:01:48.930 a payload with an object of first name N which happened from here. 32 00:01:48.960 --> 00:01:50.020 Exactly. 33 00:01:50.050 --> 00:01:57.020 And then the type was user update first name which is right here. 34 00:01:57.050 --> 00:01:59.591 And then next data generated 35 00:01:59.791 --> 00:02:03.040 from the section is user and its first 36 00:02:03.070 --> 00:02:05.565 name became N and last name was 37 00:02:05.765 --> 00:02:08.060 Vacheishvili and user ID is one. 38 00:02:08.090 --> 00:02:10.514 So this helps you keep track of any 39 00:02:10.714 --> 00:02:12.730 changes happening to your store. 40 00:02:12.760 --> 00:02:14.130 Whether you want to use 41 00:02:14.330 --> 00:02:15.500 it is up to you or not. 42 00:02:15.530 --> 00:02:17.580 I actually don't like logging so many 43 00:02:17.610 --> 00:02:20.843 things so all I'm going to do is just 44 00:02:21.043 --> 00:02:22.940 comment out these lines. 45 00:02:22.970 --> 00:02:25.660 But if you want to use it, it's up to you. 46 00:02:25.680 --> 00:02:28.100 Since you're a beginner, this will be a great help to you. 47 00:02:28.130 --> 00:02:31.100 So I wanted to show you that this exists 48 00:02:31.130 --> 00:02:34.173 so that you're able to track where your 49 00:02:34.373 --> 00:02:37.060 errors or bugs might be coming from. 50 00:02:37.080 --> 00:02:38.340 Thanks so much for listening. 51 00:02:38.370 --> 00:02:44.100 In the next video we're going to talk about persisting the state when user makes 52 00:02:44.130 --> 00:02:48.420 different actions such as forcing to quit your app. 53 00:02:48.440 --> 00:02:49.520 See you in the next video.