Once again, we have added in a lot of code to ourselves reducer, and we have no idea if it is working
correctly.
So in this video, we're going to take a look at one way that we can start to test out our reduc store
manually without having to set up a full testing framework or anything like that.
First to get started, I want to go back over to my browser very quickly.
You might have an error message like this right here.
Again, I've mentioned this error message several times.
We're seeing this error because we have a bundles reducer dots file that is currently completely empty.
You cannot make this go away by just adding something inside there.
You have to add something in either one import or at least one export.
We then have to restart our development server.
So we're going to take care of that really quickly.
Just kind of fix us up and then we'll dive into some manual testing around our reducer.
OK, so back inside my editor, I'm going to find the bundles reducer file.
I'll then do an export default, one inside of here, so again, this is just a dummy export just to
get that air to go.
It's going to save this file.
If I go back over my browser and refresh again, they're still here, so I have to go back over to my
terminal and restart my development server.
We'll go back and read my journal.
Stop my development server and do another NPM start.
That, of course, is going to kick me back over my browser in just a moment.
I'll let the thing warm up.
And while that is starting up, let's talk about how we can mentally test out our reducer again without
setting up a whole big testing framework.
So I'm going to go back over to my Staats file.
So as we just saw in the last video, we can manually get all the state out of our store by calling
store dot get states as another quick reminder around the world of Redox, you can manually dispatch
an action to be processed by your store by calling store dispatch.
So you can put in an action right there with a full type of payload or whatever else, so to manually
test out our store and just do a little bit of work with it and make sure that our reducer is kind of
working as expected, we are going to manually dispatch a couple of different actions in this video.
We will then console, logout our states, inspect it and just make sure that everything is working
as expected.
This is definitely no replacement or a full on testing suite.
I really just want to give you an example of how you can work directly with the redox, mainly dispatch
some actions, manually get the state and make sure everything is working as expected.
So again, not replacing testing.
I just want you to get a little bit more low level feel for redux itself.
All right, so to dispatch an action manually, we're going to first have to import our action types.
So at the very top, I'm going to import action types first.
I think we call just action type from the action types directory.
We then have to figure out what kind of action we want to dispatch.
Well, right now, when our application first starts up, our sells piece of state, totally empty,
nothing inside of it.
We don't have any cells inside there.
So let's try it first.
Adding a couple of cells to add and sell a cell.
We can dispatch an action of type insert cell before.
So I'll dispatch an action of type action type dot insert cell before I'll then put in a payload property.
And as a reminder, this payload must have an either ID that has a string or null and the type of cell
that we want to create.
I'm going to put in an idea of null because we don't have any other cell already inside this reducer.
We can insert a new cell before.
Well, then also put in a type of code to say that I want to create a code cell.
OK, so that should create a new cell for us, then I'll do a quick log of Staudt Get State.
It's going to save this all, then go back over to my browser to refresh, and now I should see a console
log of my state.
So sure enough, it looks like I did successfully add in a brand new cell inside of my order.
I've got an randomly generated idea inside their.
And inside of my data object, I've got that one cell that has some content, ID and type.
Now, if we want to, we could very easily start to add in a second cell so we could do something like
that, just duplicate that same code.
Maybe we'll make this one a text cell instead.
I'll save that to another refresh.
And now I can see that I do have two separate cells that have been created and I can see both those
inside the data object as well.
One is code and one is text.
Well, I'd say that this definitely is a good indication that we have the ability to successfully add
in new cells.
So at this point, I'm going to say this is pretty much good enough for me.
We are only testing right now that one single action type.
I'm going to leave it up to you if you want to try testing out anything else, totally up to you.
So if you want to try despatching other kinds of actions and manipulating our state and just verifying
that everything is working as expected, that'd be fantastic.
And I would encourage you to do so.
But I'm not going to go through that because I'm going to just kind of leave.
It has exploration for you.
A lot of our other action types, the one thing I will say, the other action types we have really rely
upon getting the idea of an existing cell inside of our store.
So if you want to try to dispatch another action that requires the ID of an existing cell, you could
get the idea of an existing cell by doing something like const ID is store get state cells, dot order
and then you can get out of there the first ID or the second ID, third ID and so on.
So order at zero would give us the first ID.
So the idea for the very first cell that got created that before, the one that was created by that
action right there, then you can make use of that idea to try to insert a cell before it, try to modify
it, try to delete it or do whatever else you want to try.
So, again, if you want to give that a shot, I'll leave it up to you.
I just wanted to show you what we can always mentally manipulate our store if we want to.
OK, so that's pretty much it.
I am going to do some cleanup inside this file.
I don't want to have any of those dispatches laying around or anything like that.
It's going to delete all that and I don't need that import laptop anymore.
There we go.
All right, well, I think that we're pretty much good on the right side of things, so we're going
to take a pause right here and then start to move back over to the back side of our project in just
a moment.