1
00:00:01,359 --> 00:00:06,010
Once again, we have added in a lot of code to ourselves reducer, and we have no idea if it is working

2
00:00:06,010 --> 00:00:06,540
correctly.

3
00:00:06,850 --> 00:00:10,330
So in this video, we're going to take a look at one way that we can start to test out our reduc store

4
00:00:10,330 --> 00:00:14,530
manually without having to set up a full testing framework or anything like that.

5
00:00:15,250 --> 00:00:18,070
First to get started, I want to go back over to my browser very quickly.

6
00:00:18,490 --> 00:00:20,570
You might have an error message like this right here.

7
00:00:20,620 --> 00:00:23,050
Again, I've mentioned this error message several times.

8
00:00:23,260 --> 00:00:28,470
We're seeing this error because we have a bundles reducer dots file that is currently completely empty.

9
00:00:28,990 --> 00:00:31,810
You cannot make this go away by just adding something inside there.

10
00:00:31,810 --> 00:00:35,410
You have to add something in either one import or at least one export.

11
00:00:35,770 --> 00:00:37,570
We then have to restart our development server.

12
00:00:37,820 --> 00:00:39,220
So we're going to take care of that really quickly.

13
00:00:39,220 --> 00:00:43,570
Just kind of fix us up and then we'll dive into some manual testing around our reducer.

14
00:00:44,290 --> 00:00:48,040
OK, so back inside my editor, I'm going to find the bundles reducer file.

15
00:00:49,260 --> 00:00:55,590
I'll then do an export default, one inside of here, so again, this is just a dummy export just to

16
00:00:55,590 --> 00:00:56,390
get that air to go.

17
00:00:57,340 --> 00:00:58,320
It's going to save this file.

18
00:00:59,240 --> 00:01:03,560
If I go back over my browser and refresh again, they're still here, so I have to go back over to my

19
00:01:03,560 --> 00:01:05,570
terminal and restart my development server.

20
00:01:06,760 --> 00:01:07,900
We'll go back and read my journal.

21
00:01:09,100 --> 00:01:12,220
Stop my development server and do another NPM start.

22
00:01:14,410 --> 00:01:17,650
That, of course, is going to kick me back over my browser in just a moment.

23
00:01:17,890 --> 00:01:19,050
I'll let the thing warm up.

24
00:01:19,060 --> 00:01:24,100
And while that is starting up, let's talk about how we can mentally test out our reducer again without

25
00:01:24,100 --> 00:01:26,320
setting up a whole big testing framework.

26
00:01:26,920 --> 00:01:30,340
So I'm going to go back over to my Staats file.

27
00:01:31,320 --> 00:01:36,150
So as we just saw in the last video, we can manually get all the state out of our store by calling

28
00:01:36,150 --> 00:01:42,990
store dot get states as another quick reminder around the world of Redox, you can manually dispatch

29
00:01:42,990 --> 00:01:47,400
an action to be processed by your store by calling store dispatch.

30
00:01:48,370 --> 00:01:54,280
So you can put in an action right there with a full type of payload or whatever else, so to manually

31
00:01:54,280 --> 00:01:59,020
test out our store and just do a little bit of work with it and make sure that our reducer is kind of

32
00:01:59,020 --> 00:02:03,850
working as expected, we are going to manually dispatch a couple of different actions in this video.

33
00:02:04,240 --> 00:02:08,830
We will then console, logout our states, inspect it and just make sure that everything is working

34
00:02:08,830 --> 00:02:09,620
as expected.

35
00:02:10,120 --> 00:02:13,570
This is definitely no replacement or a full on testing suite.

36
00:02:13,810 --> 00:02:18,130
I really just want to give you an example of how you can work directly with the redox, mainly dispatch

37
00:02:18,130 --> 00:02:21,770
some actions, manually get the state and make sure everything is working as expected.

38
00:02:21,790 --> 00:02:23,750
So again, not replacing testing.

39
00:02:23,890 --> 00:02:27,340
I just want you to get a little bit more low level feel for redux itself.

40
00:02:28,550 --> 00:02:34,550
All right, so to dispatch an action manually, we're going to first have to import our action types.

41
00:02:35,280 --> 00:02:38,770
So at the very top, I'm going to import action types first.

42
00:02:38,900 --> 00:02:43,670
I think we call just action type from the action types directory.

43
00:02:45,490 --> 00:02:48,880
We then have to figure out what kind of action we want to dispatch.

44
00:02:49,240 --> 00:02:54,430
Well, right now, when our application first starts up, our sells piece of state, totally empty,

45
00:02:54,430 --> 00:02:55,210
nothing inside of it.

46
00:02:55,210 --> 00:02:56,830
We don't have any cells inside there.

47
00:02:57,290 --> 00:02:58,180
So let's try it first.

48
00:02:58,180 --> 00:03:01,210
Adding a couple of cells to add and sell a cell.

49
00:03:01,240 --> 00:03:05,080
We can dispatch an action of type insert cell before.

50
00:03:05,990 --> 00:03:14,150
So I'll dispatch an action of type action type dot insert cell before I'll then put in a payload property.

51
00:03:14,150 --> 00:03:21,140
And as a reminder, this payload must have an either ID that has a string or null and the type of cell

52
00:03:21,140 --> 00:03:22,010
that we want to create.

53
00:03:22,730 --> 00:03:27,800
I'm going to put in an idea of null because we don't have any other cell already inside this reducer.

54
00:03:27,870 --> 00:03:29,540
We can insert a new cell before.

55
00:03:30,450 --> 00:03:34,830
Well, then also put in a type of code to say that I want to create a code cell.

56
00:03:37,200 --> 00:03:43,440
OK, so that should create a new cell for us, then I'll do a quick log of Staudt Get State.

57
00:03:44,730 --> 00:03:51,840
It's going to save this all, then go back over to my browser to refresh, and now I should see a console

58
00:03:51,850 --> 00:03:52,680
log of my state.

59
00:03:54,040 --> 00:03:58,630
So sure enough, it looks like I did successfully add in a brand new cell inside of my order.

60
00:03:58,930 --> 00:04:01,480
I've got an randomly generated idea inside their.

61
00:04:02,510 --> 00:04:08,420
And inside of my data object, I've got that one cell that has some content, ID and type.

62
00:04:09,390 --> 00:04:14,940
Now, if we want to, we could very easily start to add in a second cell so we could do something like

63
00:04:14,940 --> 00:04:16,480
that, just duplicate that same code.

64
00:04:16,620 --> 00:04:19,050
Maybe we'll make this one a text cell instead.

65
00:04:20,010 --> 00:04:22,470
I'll save that to another refresh.

66
00:04:23,390 --> 00:04:28,670
And now I can see that I do have two separate cells that have been created and I can see both those

67
00:04:28,670 --> 00:04:30,380
inside the data object as well.

68
00:04:30,860 --> 00:04:32,480
One is code and one is text.

69
00:04:33,250 --> 00:04:37,730
Well, I'd say that this definitely is a good indication that we have the ability to successfully add

70
00:04:37,730 --> 00:04:38,730
in new cells.

71
00:04:39,290 --> 00:04:42,180
So at this point, I'm going to say this is pretty much good enough for me.

72
00:04:42,590 --> 00:04:45,680
We are only testing right now that one single action type.

73
00:04:45,840 --> 00:04:50,060
I'm going to leave it up to you if you want to try testing out anything else, totally up to you.

74
00:04:50,480 --> 00:04:55,250
So if you want to try despatching other kinds of actions and manipulating our state and just verifying

75
00:04:55,250 --> 00:04:58,100
that everything is working as expected, that'd be fantastic.

76
00:04:58,100 --> 00:04:59,450
And I would encourage you to do so.

77
00:05:00,080 --> 00:05:02,600
But I'm not going to go through that because I'm going to just kind of leave.

78
00:05:02,600 --> 00:05:04,190
It has exploration for you.

79
00:05:04,790 --> 00:05:09,560
A lot of our other action types, the one thing I will say, the other action types we have really rely

80
00:05:09,560 --> 00:05:13,130
upon getting the idea of an existing cell inside of our store.

81
00:05:13,400 --> 00:05:19,010
So if you want to try to dispatch another action that requires the ID of an existing cell, you could

82
00:05:19,010 --> 00:05:29,720
get the idea of an existing cell by doing something like const ID is store get state cells, dot order

83
00:05:30,140 --> 00:05:35,030
and then you can get out of there the first ID or the second ID, third ID and so on.

84
00:05:35,840 --> 00:05:39,200
So order at zero would give us the first ID.

85
00:05:40,120 --> 00:05:45,370
So the idea for the very first cell that got created that before, the one that was created by that

86
00:05:45,370 --> 00:05:50,380
action right there, then you can make use of that idea to try to insert a cell before it, try to modify

87
00:05:50,380 --> 00:05:52,960
it, try to delete it or do whatever else you want to try.

88
00:05:53,530 --> 00:05:55,490
So, again, if you want to give that a shot, I'll leave it up to you.

89
00:05:55,540 --> 00:06:00,730
I just wanted to show you what we can always mentally manipulate our store if we want to.

90
00:06:01,570 --> 00:06:03,120
OK, so that's pretty much it.

91
00:06:03,610 --> 00:06:05,650
I am going to do some cleanup inside this file.

92
00:06:05,920 --> 00:06:09,370
I don't want to have any of those dispatches laying around or anything like that.

93
00:06:09,770 --> 00:06:13,420
It's going to delete all that and I don't need that import laptop anymore.

94
00:06:14,140 --> 00:06:14,590
There we go.

95
00:06:16,070 --> 00:06:20,180
All right, well, I think that we're pretty much good on the right side of things, so we're going

96
00:06:20,180 --> 00:06:24,500
to take a pause right here and then start to move back over to the back side of our project in just

97
00:06:24,500 --> 00:06:24,940
a moment.