1
00:00:00,180 --> 00:00:03,160
Just like React Redux also has details.

2
00:00:03,180 --> 00:00:09,330
And one could even argue that in Redux, using death tolls is much more beneficial than traditional

3
00:00:09,330 --> 00:00:09,750
react.

4
00:00:10,020 --> 00:00:15,780
How the setup is a bit more complicated, because not only you need to get the extension just like normal

5
00:00:15,780 --> 00:00:19,470
react, you also need to set up a bit of the code.

6
00:00:19,710 --> 00:00:24,870
So we'll do that in this video and I'll show you the benefits of using Redux Deftones.

7
00:00:25,140 --> 00:00:29,890
So in order to get up and running with Redux def those first of all we need to search for them.

8
00:00:29,910 --> 00:00:34,770
I think that will be the fastest way because you'll right away get a link to extensions.

9
00:00:35,070 --> 00:00:37,070
That should be your first suggestion.

10
00:00:37,440 --> 00:00:40,740
Click on it and then get the extension bravely.

11
00:00:40,740 --> 00:00:43,860
Click on Add the Chrome and you'll be good to go.

12
00:00:44,190 --> 00:00:49,830
Or you'll notice that even though we have installed the Deltas, well, we'll have a bit of an issue.

13
00:00:50,490 --> 00:00:52,290
We'll go with inspect notice.

14
00:00:52,290 --> 00:00:56,040
I do have the redux, but then I can see that no store found.

15
00:00:56,040 --> 00:00:58,170
Make sure to follow the instructions.

16
00:00:58,850 --> 00:01:00,800
Instructions are following more.

17
00:01:00,810 --> 00:01:03,240
Essentially, we would need to add a piece of code.

18
00:01:03,480 --> 00:01:09,540
So again, let me go to black Google and we're going to type again Redux Dev tools.

19
00:01:09,660 --> 00:01:11,910
And now in this case, let's look for extension.

20
00:01:12,150 --> 00:01:14,760
So let's look for Riddick's dev tools extension.

21
00:01:14,940 --> 00:01:16,080
That's the one we would want.

22
00:01:16,350 --> 00:01:22,230
And that instead of following the first link, which essentially just gave us an extension in this case,

23
00:01:22,230 --> 00:01:26,520
I would want to go to a GitHub repo, lets bravely click on that.

24
00:01:26,900 --> 00:01:29,310
And we are going to keep on scrolling.

25
00:01:29,310 --> 00:01:32,790
Of course, there's all the installation and everything explained.

26
00:01:33,120 --> 00:01:35,970
But what we are looking for is this piece of code.

27
00:01:36,150 --> 00:01:41,970
And I also want to mention that there is an alternative way we can install the package that does that

28
00:01:41,970 --> 00:01:47,790
for us and essentially as start setting up your middleware and all that, that probably is a better

29
00:01:47,790 --> 00:01:48,210
way.

30
00:01:48,540 --> 00:01:50,910
But in our case, again, we have a simple application.

31
00:01:50,910 --> 00:01:53,100
We're just getting our feet wet with redacts.

32
00:01:53,340 --> 00:01:55,470
So we're just going to go with a simple code.

33
00:01:55,470 --> 00:01:57,000
So that's what you would need to copy.

34
00:01:57,270 --> 00:02:03,870
You have your create store, then you have your juicer and then comma and then window and then whatever

35
00:02:04,050 --> 00:02:07,260
this mumbo-jumbo gibberish that is on the screen.

36
00:02:07,470 --> 00:02:13,290
So let me copy the code, then head back to my text that are the comma copy and paste.

37
00:02:13,560 --> 00:02:14,140
What's it.

38
00:02:14,550 --> 00:02:19,710
And now if we're going to check it out on a bigger browser window, we should have access to our dev

39
00:02:19,710 --> 00:02:20,760
tools and we do.

40
00:02:21,150 --> 00:02:23,880
And as you can see, it has a very, very nice interface.

41
00:02:24,030 --> 00:02:26,930
I can right away see what actions were dispatched.

42
00:02:27,090 --> 00:02:33,510
So notice how two times we dispatch get totals and in fact, we will fix that later on in the video.

43
00:02:33,780 --> 00:02:37,170
But as far as the details notice, we have the actions.

44
00:02:37,170 --> 00:02:40,230
So of course, these would be the actions that were dispatched then.

45
00:02:40,230 --> 00:02:41,430
We also have our state.

46
00:02:41,670 --> 00:02:44,550
So for example, we have our card in total, the amount.

47
00:02:44,730 --> 00:02:50,520
And as something is going to be happening in the actual application, of course, notice again, we

48
00:02:50,520 --> 00:02:53,250
are shown all the actions that were dispatched.

49
00:02:53,490 --> 00:02:58,020
We are shown what is the current state of the state water store.

50
00:02:58,260 --> 00:03:00,480
And we also have this nice chart and all that.

51
00:03:00,660 --> 00:03:06,510
And again, there's many, many interesting things that you can find in their and like I said, one

52
00:03:06,510 --> 00:03:10,770
could argue that they are way more beneficial than traditional react.

53
00:03:11,100 --> 00:03:14,910
And I'll start by checking why I have get totals twice.

54
00:03:15,180 --> 00:03:16,980
So why we're dispatching the section.

55
00:03:17,190 --> 00:03:23,340
And the reason for that is because in the card container, remember, we ran our use of it.

56
00:03:23,580 --> 00:03:25,650
Now the way you use effect works.

57
00:03:25,920 --> 00:03:31,540
It runs after every render unless you set up the dependency array.

58
00:03:31,770 --> 00:03:33,230
And that is exactly what's happening.

59
00:03:33,360 --> 00:03:34,560
That's why we run it twice.

60
00:03:34,800 --> 00:03:38,190
And in order to fix that, I would need to add my dependency error.

61
00:03:38,460 --> 00:03:41,490
So I'm going to add my array as a second argument.

62
00:03:41,730 --> 00:03:45,040
And then in my dependency error, I'm just going to say, you know what?

63
00:03:45,210 --> 00:03:49,530
Call this callback function only if something changes in the cart.

64
00:03:50,040 --> 00:03:51,780
So I'm going to go with card.

65
00:03:51,870 --> 00:03:56,520
Let's save it and we'll see that we only run our totals once.

66
00:03:56,910 --> 00:04:01,710
So only if something will change in the card, then of course, we'll calculate our totals.

67
00:04:02,070 --> 00:04:06,330
What Mr. Stroud notice in this case, I toggle the amount, OK?

68
00:04:06,330 --> 00:04:12,240
I can see that my amount went from three to four, then my total went from eighteen hundred to twenty

69
00:04:12,240 --> 00:04:17,190
four hundred and the last action that was dispatched was getting totals.

70
00:04:17,370 --> 00:04:20,310
Now we're also going to get a warning in our console.

71
00:04:20,460 --> 00:04:24,480
So let me open up my console and you'll see that react.

72
00:04:24,860 --> 00:04:29,040
We use a fact, has a missing dependency issue is the dispatch.

73
00:04:29,190 --> 00:04:35,670
So as a second item in our dependency or I can just pass in a dispatch and that's not going to fix the

74
00:04:35,800 --> 00:04:39,840
totals or at least the react one complain about our setup.

75
00:04:40,050 --> 00:04:43,680
So that's how we can get up and running with Redux Dactyls.