Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Redux Exercise" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Steve reviews the exercise to fulfill the tests on actions in the Jetsetter application.

Get Unlimited Access Now

Transcript from the "Redux Exercise" Lesson

[00:00:03]
>> Steve Kinney: So, on Jetsetter there is a branch called redux testing. And I'll show you a little bit about what it is. It's that we know and love, from the very beginning, but we have this test directory. And in the test directory we have Two files of tests. Now, in a perfect world, you would probably break this out into multiple files, right?

[00:00:29] For every actions file that you would have, you'd probably have a test file for that, for every reducer that you had, you'd probably have a file for that, right? But nobody wants to watch me switch between multiple files and keep track so I put them in one file on purpose.

[00:00:44] Right, you would probably break it out but for our own sanity. So actions.test, I'm going to import my action creators from the three different files as well as the constants which are those strings with the action type is. And again, this you would probably not import all of this in one test file, if you're doing it but I did it just to keep everything in one file so we didn't we have to like to worry about junking around too much.

[00:01:08] And then to test this, and you can see this test is already passing. Which is when we use the add new item as the item type, we're gonna get back action where the type is the add new item, right. So we're gonna pass in. We're gonna call add new item with an item name or hoping to get back in action with the add new item type.

[00:01:30] And that's how it's passing. So well, you got the value, you get action.item.value.
>> Steve Kinney: A few of them are passing. A lot of them are skipped because they're not implemented yet, right? Your job is going to be to implement these actions that are going to, again, take either nothing.

[00:01:51] Right? If it is simply like, think about the reset button on the counter or the pizza calculator. That didn't take any arguments. It was just a function that produced an object with a reset type. So it can take some options, it takes some arguments and produces an object.

[00:02:07] And these tests are making sure that the object that we created is correct. So if we call the toggleItem action creator, we're hoping we get an action with the type TOGGLE_ITEM. If we provide it with an id, we're expecting that the action.id is that id. Right? So we're going through and we're just basically, and these are enough tests for our actions, they are very simple functions.

[00:02:29] Let's look at the reducer test. So I'm testing the Combined Reducer, which is all of them put together. Again, you might break it out. So we can say, hey, if the reducer takes the initialState and receives just this empty action that doesn't do anything, we should probably get the initial state back out, right, you wanna make sure you return state at the end.

[00:02:51] If on the other hand we parse it a item, right, so we use the action creator here, we parse it A action that has the addNewItem type, and has all the information about the item. Well, we expect that the state.items includes that new item, right? If we add a new item, we want it to be in the state.

[00:03:11] So these are kind of very simple tests, but this is effectively what Redux testing is, there's not some next level Thing for basic redox. It's pass the objects to functions or the values to functions. Did you get the thing out again? Right, and that's one of the things I really like about.

[00:03:29] I think there's a lot of beauty and simplicity of redox in this case. So we can just really quickly look inside actions. And you can see that I implemented the ADD_NEW_ITEM action Your job for the next 30 minutes is to get as many of these tests passing as you can.

[00:03:48] Do I expect you to get all of them passing in 30 minutes? That would be super cool. I would say try some of the action ones, try some of the reducer ones, and then we'll come back and kind of look at the finished result. But get your hands dirty with each of them, just get some muscle memory, don't stress out about like banging through all of them, but see how many you can get done, again objects and values go into functions coming out and seeing how many tests you can get passing.