Check out a free preview of the full Reactive Angular with NgRx course

The "Effects Debug & Review" Lesson is part of the full, Reactive Angular with NgRx course featured in this preview video. Here's what you'd learn in this lesson:

Lukas debugs the application, explains why this step was vital, and summarizes the section.

Preview
Close

Transcript from the "Effects Debug & Review" Lesson

[00:00:00]
>> Lukas Ruebbelke: One of the little things that I wanna call out that I think is really important, and kind of by default we've done this, or I've been very careful to keep our services really clean. In other words, you have a bunch of these very small methods that are simply calling the service.

[00:00:24]
So what bothered me is what stateful service is, is you would have part of your service going and fetching the data, and the other part like having to like manage that state. And its like, now this thing is doing two different things, like what is going on? Whereas here, we are allowing the service to do one thing in this case.

[00:00:45]
We do have some additional like, go get this thing, and let's do some type of observable transformation. But for the most part, these create, update and delete. This is being offloaded to the ECTP service, and the control flow around it is in the effect. [INAUDIBLE] everything is building.

[00:01:13]
>> [INAUDIBLE]
>> Lukas Ruebbelke: Check the effects.
>> Lukas Ruebbelke: We'll just fix these imports real quick.
>> Lukas Ruebbelke: There we go. And, that's [INAUDIBLE]
>> Lukas Ruebbelke: I got a good feeling about this.
>> Lukas Ruebbelke: Let's check the tools here, so I'm calling map to make sure that in our effects, that exist here. So one thing that I am doing that I will come back, and I'm so used to on components making everything private, that you actually want your payload to be public.

[00:02:49]
So that is one thing that is muscle memory. But in the case of your action object.
>> Lukas Ruebbelke: I don't think this is going to change anything.
>> Lukas Ruebbelke: So Data Loaded. Something I believe is going wrong in the selector. So, after a little bit of debugging pair programming, the issue is that in our barrel, we were exporting the wrong selector.

[00:03:33]
And so, was quite possibly just an oversight on my part. But what was happening is that in our low level selector, I thought I was referencing this. But instead, I was exporting this one right here, which was breaking. So, once I exported the correct selector in the barrel roll here.

[00:04:05]
It fired right up. And let me just run the server to prove that it's working. I also disabled my auto-import extension, clearly not doing me any favors. Thanks a lot, import.
>> Lukas Ruebbelke: So as soon as this builds, I will demonstrate that we're doing a round trip, and that's it's coming in.

[00:04:28]
And then I'll cut a branch.
>> Lukas Ruebbelke: There we go. So, what's happening here, is we'll pull up Redux.
>> Lukas Ruebbelke: You can see that we're saying load data, which is then going.
>> Lukas Ruebbelke: And calling, and loading the projects here, and then resolving in the data loaded down here. And so just to review the effect real quick, and what's happening.

[00:05:13]
If we go to project's effects, we're listening for a command event, like do this thing. Which is then being picked up and wrapping it in data persistence, the data persistence library, to provide us some additional protection. Kind of some, guards against asynchronous things going awry. The big one being, pessimistic updates or optimistic updates.

[00:05:43]
And then within the run block, we're making or initiating our asynchronous call, which then completes as, or when it then completes, then we dispatch a new event. So I think of this as the completion event, which gets picked up by the reducer.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now