Original subtitles

For this module, I prepared a little demo project, which you'll find attached to this lecture, and

this project in the end renders this very simple application here where we got a list of fictional products

and we got a favorites section.

And we can basically switch between these pages and we can mark something as a favorite here into all

product page and then see it here.

And we'll obviously also get rid of that favorite status and so on.

So a very trivial app, but an app where I use Redux to manage to his favorite status.

I use redux here because we need to state in two different pages and that would be harder to do with

props only.

And in addition, as I already covered throughout the course, I don't want to pass all the state through

multiple layers of components just so that I have it everywhere where I need it.

And Rydex is really convenient for such cases.

It's a great state management tool when you have some global state and a list of products and favorite

products would be a great example if you're building more complete online shop, for example.

Now in this relatively simple project, which of course is simple so that we can focus on Redox and

how to replace it, dare I use the traditional redacts approach I showed you in the course here?

I have my products producer with some initial state which initializes my products.

Every product has an idiot Heidler description and the favorite status and then introduce her.

I watch for one action where I basically switch at favorite status of product and inverted and assign

a new state thereafter in my actions while I have that one action where we will have action type.

And then also the idea of the product which should be switched that is connected here to the products.

Jaspal, which is our products page with the help of the U.S. selector hook added by React Redux version

seven or higher, which I covered at the end of the module where we transform our Burgher builder to

use Hooke's there I covered this hook to at the end and this hook is simply used to select a slice of

our state, the shop slice, which we create in next here by combining our reducers or well, our one

producer here.

But again, it is an example that could be part of a bigger app.

And then here we select the products list from that slice and output it here.

That's what I'm doing here in the favorites chestful.

I also select something with you select or from my store, iSelect, all products that are a favorite

so that I can output them there.

And last but not least in the product item JS file there.

I used to use dispatchable provided by react redux so that when we click that favorite button here,

we dispatch this toggle FAF action which is defined in the actions folder of our store folder.

That's how this app works.

And the first important thing I really want to emphasize is that there's nothing wrong with that approach.

You don't need to switch away from redacts at all, but maybe you want to.

And why would you?

Well, maybe you want to stay in the react only world so that you don't need to learn redacts.

Arguably, it's not that hard to learn redacts.

But still, maybe you want to use only the tools Riak gives you.

Maybe yours is simply don't want to add that extra redox and React Redux library to your project.

Hence you would end up with a smaller bundle because if you don't have these extra libraries included,

obviously you ship less code when you deploy your application.

And that could be a good argument because you can certainly shrink your bundle a bit.

Though I will also say if you have a really large application, it might not matter that much if it's

included or not yet.

That could be a reason for why you don't want to use redacts or you simply want to explore how you can

manage your state globally without passing everything through props, but still without using redacts.

And that's why in this module, I will now show you two different approaches of managing your state

with react only tools.

One of those approaches is a good one.

The other one is not that great, at least not for all use cases.

And I will show both and I will explain when to use which.