Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,250 --> 00:00:08,760
For this module, I prepared a little demo project, which you'll find attached to this lecture, and
2
00:00:08,760 --> 00:00:16,350
this project in the end renders this very simple application here where we got a list of fictional products
3
00:00:16,350 --> 00:00:18,000
and we got a favorites section.
4
00:00:18,300 --> 00:00:23,640
And we can basically switch between these pages and we can mark something as a favorite here into all
5
00:00:23,640 --> 00:00:25,860
product page and then see it here.
6
00:00:26,070 --> 00:00:29,280
And we'll obviously also get rid of that favorite status and so on.
7
00:00:29,460 --> 00:00:34,830
So a very trivial app, but an app where I use Redux to manage to his favorite status.
8
00:00:35,340 --> 00:00:42,120
I use redux here because we need to state in two different pages and that would be harder to do with
9
00:00:42,120 --> 00:00:43,020
props only.
10
00:00:43,020 --> 00:00:47,790
And in addition, as I already covered throughout the course, I don't want to pass all the state through
11
00:00:47,790 --> 00:00:52,590
multiple layers of components just so that I have it everywhere where I need it.
12
00:00:52,680 --> 00:00:55,190
And Rydex is really convenient for such cases.
13
00:00:55,260 --> 00:01:01,470
It's a great state management tool when you have some global state and a list of products and favorite
14
00:01:01,470 --> 00:01:06,980
products would be a great example if you're building more complete online shop, for example.
15
00:01:07,680 --> 00:01:14,220
Now in this relatively simple project, which of course is simple so that we can focus on Redox and
16
00:01:14,220 --> 00:01:20,550
how to replace it, dare I use the traditional redacts approach I showed you in the course here?
17
00:01:20,550 --> 00:01:24,930
I have my products producer with some initial state which initializes my products.
18
00:01:25,230 --> 00:01:30,480
Every product has an idiot Heidler description and the favorite status and then introduce her.
19
00:01:30,480 --> 00:01:38,730
I watch for one action where I basically switch at favorite status of product and inverted and assign
20
00:01:38,730 --> 00:01:45,180
a new state thereafter in my actions while I have that one action where we will have action type.
21
00:01:45,180 --> 00:01:51,090
And then also the idea of the product which should be switched that is connected here to the products.
22
00:01:51,090 --> 00:01:58,320
Jaspal, which is our products page with the help of the U.S. selector hook added by React Redux version
23
00:01:58,320 --> 00:02:05,040
seven or higher, which I covered at the end of the module where we transform our Burgher builder to
24
00:02:05,040 --> 00:02:11,490
use Hooke's there I covered this hook to at the end and this hook is simply used to select a slice of
25
00:02:11,490 --> 00:02:20,020
our state, the shop slice, which we create in next here by combining our reducers or well, our one
26
00:02:20,040 --> 00:02:20,640
producer here.
27
00:02:20,640 --> 00:02:23,940
But again, it is an example that could be part of a bigger app.
28
00:02:24,720 --> 00:02:28,800
And then here we select the products list from that slice and output it here.
29
00:02:29,310 --> 00:02:32,010
That's what I'm doing here in the favorites chestful.
30
00:02:32,010 --> 00:02:37,650
I also select something with you select or from my store, iSelect, all products that are a favorite
31
00:02:37,740 --> 00:02:39,270
so that I can output them there.
32
00:02:39,690 --> 00:02:43,020
And last but not least in the product item JS file there.
33
00:02:43,020 --> 00:02:48,900
I used to use dispatchable provided by react redux so that when we click that favorite button here,
34
00:02:48,900 --> 00:02:54,600
we dispatch this toggle FAF action which is defined in the actions folder of our store folder.
35
00:02:55,110 --> 00:02:56,220
That's how this app works.
36
00:02:56,220 --> 00:03:02,160
And the first important thing I really want to emphasize is that there's nothing wrong with that approach.
37
00:03:02,160 --> 00:03:07,160
You don't need to switch away from redacts at all, but maybe you want to.
38
00:03:07,170 --> 00:03:08,280
And why would you?
39
00:03:09,150 --> 00:03:14,820
Well, maybe you want to stay in the react only world so that you don't need to learn redacts.
40
00:03:14,820 --> 00:03:17,230
Arguably, it's not that hard to learn redacts.
41
00:03:17,250 --> 00:03:21,030
But still, maybe you want to use only the tools Riak gives you.
42
00:03:21,630 --> 00:03:28,020
Maybe yours is simply don't want to add that extra redox and React Redux library to your project.
43
00:03:28,200 --> 00:03:33,480
Hence you would end up with a smaller bundle because if you don't have these extra libraries included,
44
00:03:33,690 --> 00:03:37,320
obviously you ship less code when you deploy your application.
45
00:03:37,440 --> 00:03:41,010
And that could be a good argument because you can certainly shrink your bundle a bit.
46
00:03:41,370 --> 00:03:46,800
Though I will also say if you have a really large application, it might not matter that much if it's
47
00:03:46,800 --> 00:03:48,090
included or not yet.
48
00:03:48,090 --> 00:03:54,030
That could be a reason for why you don't want to use redacts or you simply want to explore how you can
49
00:03:54,420 --> 00:04:00,330
manage your state globally without passing everything through props, but still without using redacts.
50
00:04:00,960 --> 00:04:05,880
And that's why in this module, I will now show you two different approaches of managing your state
51
00:04:06,090 --> 00:04:08,220
with react only tools.
52
00:04:08,520 --> 00:04:10,500
One of those approaches is a good one.
53
00:04:10,620 --> 00:04:14,070
The other one is not that great, at least not for all use cases.
54
00:04:14,220 --> 00:04:17,370
And I will show both and I will explain when to use which.
6186
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.