1
00:00:00,140 --> 00:00:02,719
So now we're going to start to implement the shopping cart.

2
00:00:02,719 --> 00:00:09,860
And since we're using Redux toolkit, we'll create a new slice for the cart and that will hold any state

3
00:00:09,860 --> 00:00:11,980
that has to do with the shopping cart.

4
00:00:11,990 --> 00:00:19,100
So let's go into let's see, we're going to go into slices and let's create a new file here.

5
00:00:19,100 --> 00:00:23,510
We're going to call it cart slice dot JS.

6
00:00:24,760 --> 00:00:30,430
And the first thing we're going to do is import, create, slice.

7
00:00:30,430 --> 00:00:35,230
So in the other slice we use create API, right?

8
00:00:35,230 --> 00:00:43,480
Right here in products because this is a is a slice where we have endpoints that that are dealing with

9
00:00:43,480 --> 00:00:45,790
asynchronous requests, right?

10
00:00:45,790 --> 00:00:48,250
So we're not doing that with the cart.

11
00:00:48,250 --> 00:00:54,130
So we don't need to use create API, we can simply use the create slice function.

12
00:00:54,490 --> 00:00:54,850
All right.

13
00:00:54,850 --> 00:00:57,340
And then let's add that down here.

14
00:00:57,340 --> 00:01:00,340
We'll say const cart slice.

15
00:01:01,160 --> 00:01:05,180
And we're going to set that to create slice and create.

16
00:01:05,180 --> 00:01:08,600
Slice takes in an object.

17
00:01:09,320 --> 00:01:15,770
And we're going to give it a name, call it Cart, and then it's going to have some initial state and

18
00:01:15,770 --> 00:01:18,380
I'm going to actually put that in a variable above.

19
00:01:18,410 --> 00:01:19,880
So we'll do that in a second.

20
00:01:19,880 --> 00:01:24,260
And then it also has excuse me, it has a reducers object.

21
00:01:24,740 --> 00:01:25,090
Okay.

22
00:01:25,100 --> 00:01:30,770
And this reducers object will have any functions that have to do with the cart.

23
00:01:30,770 --> 00:01:33,620
So when we add to cart, remove, etcetera.

24
00:01:33,920 --> 00:01:41,240
So for the initial state, let's come up here and let's say const initial state and our items are going

25
00:01:41,240 --> 00:01:47,180
to be stored in local storage so that when we leave the site, we come back, our items are still in

26
00:01:47,180 --> 00:01:47,630
the cart.

27
00:01:47,630 --> 00:01:51,740
So we want to check that local storage item first of all.

28
00:01:51,740 --> 00:01:57,020
So let's say localstorage.getitem cart because that's what we're going to store it as you could call

29
00:01:57,020 --> 00:02:00,140
this anything, but I think Cart makes sense.

30
00:02:00,140 --> 00:02:01,340
So we'll check that.

31
00:02:01,340 --> 00:02:07,430
And if there is something there, what we're going to do is then parse whatever is in there because

32
00:02:07,430 --> 00:02:08,940
it gets stored as a string.

33
00:02:08,940 --> 00:02:15,630
Local local storage can only hold strings, but it will be in the format of, you know, of an object.

34
00:02:15,630 --> 00:02:23,400
So we're going to parse it as a JavaScript object else then we want initial state to just be an object

35
00:02:23,400 --> 00:02:25,560
that has cart items.

36
00:02:26,240 --> 00:02:28,580
Which will be just an empty array.

37
00:02:28,910 --> 00:02:29,250
Okay.

38
00:02:29,300 --> 00:02:35,360
And we'll have other stuff in here too, like the shipping address and the payment method, stuff like

39
00:02:35,360 --> 00:02:35,630
that.

40
00:02:35,630 --> 00:02:37,880
That's going to be in the cart state as well.

41
00:02:38,120 --> 00:02:47,000
Now we want to export any, any anything we create in reducers such as add to cart, remove from cart.

42
00:02:47,030 --> 00:02:49,610
What else we're going to have save shipping address.

43
00:02:49,640 --> 00:02:56,120
We'll need to export those as actions, but we also want to export the reducers altogether and bring

44
00:02:56,120 --> 00:02:57,830
it into our store file.

45
00:02:57,830 --> 00:03:03,200
So we'll say export default cart, slice dot reducer.

46
00:03:03,440 --> 00:03:04,700
So let's save that.

47
00:03:04,700 --> 00:03:09,530
And now let's go into our store dot JS file and we're going to do this.

48
00:03:09,530 --> 00:03:11,360
We're going to say import.

49
00:03:13,370 --> 00:03:14,570
Uh, cart.

50
00:03:15,240 --> 00:03:16,710
Slice.

51
00:03:17,640 --> 00:03:18,810
Reducer.

52
00:03:20,170 --> 00:03:26,440
And that's going to be let's see, it's going to be from and we want to go dot slash slices.

53
00:03:26,440 --> 00:03:28,960
Slash card slice.

54
00:03:29,880 --> 00:03:34,890
Okay, Because we're able to do this because of this, because we export that.

55
00:03:34,920 --> 00:03:38,530
We import it here and then we add it to our store.

56
00:03:38,550 --> 00:03:40,740
Basically our global reducer.

57
00:03:40,740 --> 00:03:47,130
So let's call this cart, set it to cart, slice reducer, and we should be good.

58
00:03:47,130 --> 00:03:49,200
We should, we should be.

59
00:03:49,800 --> 00:03:52,860
Let's see, import it as slice reducer.

60
00:03:52,890 --> 00:03:55,350
That's because this is actually default.

61
00:03:55,380 --> 00:03:57,570
So we don't need curly braces.

62
00:03:58,450 --> 00:03:59,620
And there we go.

63
00:04:00,460 --> 00:04:06,760
So now if I open up my redux dev tools, we should see the cart state.

64
00:04:06,760 --> 00:04:09,340
So if we go to, let's see, Redux.

65
00:04:10,050 --> 00:04:12,420
And let's pull this up a little bit.

66
00:04:12,450 --> 00:04:13,320
Yep, there it is.

67
00:04:13,320 --> 00:04:19,860
So our cart state right now is just an object that has this cart items array, which of course is empty

68
00:04:19,860 --> 00:04:21,450
because there's nothing in the cart.

69
00:04:21,959 --> 00:04:28,800
So what we'll do in the next video is we'll create an add to cart reducer in here and we'll be able

70
00:04:28,800 --> 00:04:36,630
to basically fire off an action from the page from here and we'll be able to add it to the cart.