Original subtitles

Now I got another starting project for you

to which we're now going to add Redux and some logic.

And that will then be the project

which will be used in the next lecture

to add some side effects and some asynchronous code.

But before we do that, we need to add Redux.

Because the starting project I give you

has a couple of React components.

And if you run NPM install to install all dependencies

and there after NPM start to start the development server,

you will see this application here, this dummy application

which is not interactive.

Clicking those buttons won't do anything.

This is just dummy data.

Now in this lecture, we are going to make sure

that those buttons do something.

And to be precise,

I wanna ensure that if we click the My Cart button,

we toggle this cart, so we show it

And if it is already showing up, we hide it.

I wanna make sure that if we click Add to Cart on a product,

we do add it to the cart.

And if it's already part of the cart,

we just increase the quantity of the existing item.

You can also add more dummy products for that,

so that you have more products to choose from.

And in the cart, with these buttons Plus and Minus,

we also want to control the quantity.

And if the quantity is one and we click Minus,

we remove the item entirely from the cart.

Now that's the logic we're going to add in this lecture.

And as I said in the last lecture,

this all is a great practice for you.

Try implementing all those features which I described

including that toggle mode for the cart with Redux,

potentially with multiple state slices if you want.

Here is a pause for you to pause the video

and try it on your own.

There after we're going to implement it together

step by step practicing what we learned.

Were you successful?

Let's implement this together.

And for this, let's set up Redux in this application.

Now for this I'll first of all quit the Def server

and then install @reduxjstoolkit

to install the Redux Toolkit

because I still wanna use that.

You could also use just Redux and just React Redux

but working with Redux Toolkit, simply makes working

with Redux much easier.

Now, one thing I forgot of course

is that we still need to install, React Redux though.

So you should always install React Redux

in addition to the toolkit.

Now, once both is installed, we can start setting

up our Redux logic and connecting it to the React app.

For this in the source folder, I'll add a store folder.

Again, it doesn't have to be named store

but it is a common convention.

And in that store folder, I wanna add my index JS file

which will set up my Redux store and so on.

And I also wanna create multiple slices, one slice

for managing the cart and one slice for user interface

logic like toggling the cart,

which should go into its own slice here.

And therefore I will create two files here,

a UI Slice JS file and then also mycart-slicejs file.

That's not a must do, you could put it all

into one code file, but splitting it up

ensures that all the code stays maintainable and manageable

and we don't end up with super large code files.

Now let's maybe get started with the UI Slice,

so that when we click My Cart,

we do toggle that cart area here.

For this in the UI Slice JS file,

I'll import something from @reduxjs/toolkit.

And that something as you learned,

is to create slice function

which does what the name implies.

When we call it, it creates a slice and you'll learned

that it needs to object for a configuration

where we give this slice a unique name

and here I'll choose UI as a name,

but of course the name is up to you.

Then in addition we wanna set up some initial state

and we can create a separate constant for this,

or do it here on the fly and I'll do the ladder

and my initial state is that the cartIsVisible

property is false, let's say.

Of course you can name this property however you want.

That will be the property which controls whether the cart

is visible or not, as you can probably guess by its name.

Then we need the reducers key,

which is a map of all the reducers or to be precise

it's a map of methods that represent

all the different cases, the different actions

we wanna handle with that reducer.

And here, I actually only need one method.

Let's say the toggle method, which receives the old state

and where I then wanna set statecartIsVisible

to the opposite of what it was.

And we can write this mutating code here

because you learned that when using Redux Toolkit,

we are not really mutating the state,

even though it looks like we do,

but instead Redux Toolkit will kind of capture this code

and use another third party library imer to ensure

that this is actually translated to some immutable code

which creates a new state object instead

of manipulating the existing one.

And that is our slice.

Now I'll store it in a constant UI Slice

and then export this as a default here.

And actually that's not all I wanna export,

I also wanna export the actions,

so I'll create a new constant which I export,

the UI Actions, which we get by accessing uislice.actions.

Now, with that exported, in index JS,

we wanna create our store and we do that by importing

configure store from @reduxjstoolkit,

and then we call configure store here and configure store,

then once object, where we set up our route reducer.

Now that can be a single reducer function

or a map of reducers.

And I'll go for the ladder even though at the moment

we only have a single reducer,

because we only have one slice, but since we'll later

have another slice, I'll set this to a map immediately

and add a key off UI, though that is up to you,

but I'll name it UI.

And then add an import where I import the UI Slice

from ./uislice, and therefore as a value for UI,

I point at UI Slice reducer,

so the reducer created by UI Slice.

Now that gives us our store here and therefore,

we can export this store, like this,

with the store exported, we need to provide us

to the application for it to have an effect.

And we can do this in the index JS file

where we set up our route component

where we render our route application component.

There, we can import provider, the provider component

from React Redux and wrap that around app.

So wrap provider around app like this,

and provide our store.

Now for that of course we also need to import our store,

so import store from ./storeindex.

So from that index JS file and set the store prop

off provider equal to that imported store.

That's how we provide our Redux store QD entire application,

so to all components that make up our application.

And with that provided, we can now utilize Redux inside

of these different components.

So for example, in the layout component,

in the layout folder, in the main header component there,

we got this Cart button,

this Cart button which when clicked,

should show the cart area.

Now to make that work,

we actually need to go to that Cart button component,

which we find in the cart folder,

and then here we have our button.

Now on that button, we now wanna add an on click listener

to make sure that we can do something when it's clicked.

And I'll add a new function in the Cart button component,

the toggleCartHandler function,

where I want to dispatch the logic for toggling the cart,

so for showing or hiding the cart.

And for this, of course, we need to dispatch an action

which triggers this toggle method

in our UI Slice reducers map.

So in this a reducer functions map to be precise.

And we can do this with help of the UI Actions,

which we are exporting in Cart button.

We can import UI Actions as a named import

because we export it as a named export,

imported from and then going up a level

and another level diving into store UI Slice.

From there, I import the actions

and then toggleCartHandler,

we can then dispatch our action.

For this I'll bind toggleCartHandler to the click

and to dispatch, we need access to the dispatch function.

Now we do get access to that by importing

the us dispatch hook from React Redux, as you learned.

We can execute this hook in our component function

and when we do so, this will give us access

to the dispatch function provided by Redux.

And we can not use this dispatch function here

inside of toggleCartHandler

and then simply dispatch the action

which is created by the UI Actions, toggle action creator.

We need to execute toggle

as a method here because as you'll learned

in the last core section, these auto-generated actions

which you get here, are actually action creator methods,

which you have to execute and when you execute them,

they return action objects.

So it's then this returned action object

which we dispatch here.

And with that, we should trigger toggleCartHandler

whenever we click on the button.

Now at the moment of course, if we have a look at UI Slice,

we are then changing cartIsVisible,

but we're not taking advantage of that right now.

That's something we need to do.

And for this, we should go to the app component

because that is where we render the cart.

And I now want to render it conditionally based

on that UI Slice state value.

So for that inside of app component,

we need to extract data from Redux.

And we do that with another hook

which we import from React Redux.

It's the use selector hook as you learned.

We can import use selector and then execute

that in our app component function, use selector like this,

not use effect.

We execute this and then you learned that to use selector,

we need to pass a function which receives the Redux state

automatically because this function

which we pass to use selector will be executed

by React Redux.

So it receives the current state automatically

and we should return the data

which we wanna use in this component.

And in this case, that is this

cartIsVisible property value.

But for this we'll need to drill into that state slice

and since I'm setting up a map of reducers

here in the index JS file in the store folder,

we need to use this key to drill

into that part of the state, so to say,

and then use that property name in which we're interested.

So here we need to access state.ui.cartIsVisible.

That's how we extract that value

and then we can store this in a constant.

ShowCart could be the constant name

and we can now use this to conditionally show

or hide this cart component like this.

If we do that and save this and restart the dev server

to make sure that that's up and running,

we should be able that once it is running again,

that we actually click My Cart to show it and hide it.

So that is working and that's the first part.

Now the missing part and arguably the more difficult part,

is that we now also wanna manage the content off the cart.

So the cart items should be updated correctly when we click

Add to Cart or when we click Plus or Minus here.

And actually the batch of value here,

in the My Cart button, should also be updated.

So let's work on this now.

For this all dive into the cart slice JS file,

and again import create slice from Redux @reduxtoolkit.

Then we create a slice here and configure it with an object.

It gets a name, for example, cart,

it gets an initial state and it will get some reducers.

And I'll come back to the initial state in a second.

Now, what is our initial state here?

How should the state of this state slice look like?

Which structure should, does state slice have?

I think it makes sense to have some items, some cart items

and that should probably be an array of items.

We probably also wanna have a total quantity

of items in the cart.

And with that, I don't mean the length of this array,

but the quantity of the items of that array summed up,

and initially that's zero.

And the total amount is probably also

something which makes sense, so the total price

which also should be zero initially.

Though for this application we actually don't need this,

because we're not showing the total price anywhere,

so I guess we can omit this, but you could

of course also add it.

Now we also need functions in our reducer,

so different actions which this part of our state

should handle in the end.

And here be clearly need a addItemToCart action

and a removeItemFromCart action, I would argue.

And it probably makes sense to start with adding items.

So here we get a state and we'll also accept

this action argument because this action,

when it is dispatched, should carry extra information.

We need to know which items should be added after all.

So let's dive into this add item to cart functional.

What should happen in there?

Well, in there, we should probably extract the item

from the action and there keep in mind that it will

be the payload property which Redux Toolkit sets

for you which contains any extra data

you add it to the action.

And here, I assume that this extra data

is another object describing the item that should be added.

Now we could just push it to disarray,

but actually I wanna check if it's part

of that array already and if it is, I wanna increase

the quantity of the existing cart item instead

of push it as an additional item.

So therefore, I want to get my existing item let's say,

by reaching out to the state items

and finding an item in there where the item ID, let's assume

that our items have IDs, is equal to the item ID

of the item we're getting here.

And since I now have a name clash, I'll name this here

new item and refer to that here.

So that's how I check if that item already exists.

Now, if it does not exist, if existing item is falsy,

so if it's not part of the array yet,

then we wanna add it.

So then we wanna go to our state items and push a new item.

And that would be absolutely bad if you're using just Redux

because push manipulates the existing array

in the existing state.

And that's a must not do, but with Redux Toolkit,

as emphasized before, we don't have that problem

because their Redux Toolkit internally ensures

that this will not manipulate the existing state

but that it instead transforms this into an operation

which updates the state in an immutable way.

So we can use push here when working with Redux Toolkit.

And then we push a new object let's say,

to our array where we have an item ID field

which is, newItem.id, where we have a price field

which let's say is, newItem.price,

expecting a price field on all our products.

Then the quantity let's say, which is one hard-coded,

because if we add an item for the first time,

the quantity will be one.

And therefore we always have a total price

which is also newItem.price.

It's price times quantity,

but since quantity is one, it's just the price.

That could be an item which we push onto this array,

maybe we should also add the title or the name,

however you want to name it after product

and I expect this on newItem.title.

Now these field names are all up to you,

because it will be your data, which you manage.

You just need to ensure that you then reference

and create objects that have the correct structure.

So with that, we're pushing a new item

onto our products array.

But we also need to work on the else case,

so the item does exist.

If that's the case, we wanna update the existing item,

again, not something you should do with just Redux

but absolutely fine when working with Redux Toolkit.

Then we reach out to the existing item

and we update those fields on the existing item.

The item ID does not need to be updated,

the price also hasn't changed,

but the quantity should be set

to existing item quantity plus one.

And therefore we can, of course, also write it like this,

the total price should be set equal

to total prize plus newItem.price.

So we add the price and of course that should be

existingItem.totalPrice.

So we increased the existing total price

by adding the item price again.

And the name also hasn't changed.

So we updated quantity and total price, and we're done.

That's our addItemToCart function here.