Angular 9 Fundamentals Angular 9 Fundamentals

Handling Shared Mutable State

Topics:

This course has been updated! We now recommend you take the Angular 13 Fundamentals course.

Check out a free preview of the full Angular 9 Fundamentals course:
The "Handling Shared Mutable State" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas explains that shared mutable state is the basis of some of the most common bugs in large applications, and demonstrates how to unshare a mutable state by creating a local copy of the data so that it doesn't allow other consumers to mutate that data.

Get Unlimited Access Now

Transcript from the "Handling Shared Mutable State" Lesson

[00:00:00]
>> Now, I want to show you something interesting as it pertains to state management. Notice when I start typing what's happening here. How is this happening? Well, pretty simple object is, or JavaScript is object by reference and so Pointing to the same object in three different places. Remember what I said about shared mutable state.

[00:00:48] Now, I want to be clear. Shared state is okay. Obviously I mean, what do you think is happening here? I'm sharing state. Mutable state is okay of course, you have to mutate state eventually, you have to allow the user to make updates. Shared mutable state is the devil.

[00:01:14] So what do you do about that? How do you handle shared mutable state? So already I've mutated this and the question is, how do I go back and undo this? Well, thankfully, I didn't save it to the server. But that's where state mutations are really, really bad. And so what you do in this case, I'm going to show you how to solve this problem or one way, is if you had shared mutable state,what you have to do is make your shared mutable state not shared.

[00:01:49] You have to break that connection so it's no longer shared that it's standalone. And so how you do that? Is inside of your course details component. I'm going to Move this down, because we're gonna do some a little bit of logic here. I going to create Another property called selected course.

[00:02:25] And then, from here, I'm going to set this as a setter. So set, I'm doing this from memory so hopefully this works. And you want to say if value exists then We are going to do something. So as long as we are passing something in, then we're going to do something.

[00:02:51] And so here, we're gonna do this selected course equals object.assign. And we're going to create a clone of the course object that we send in. And so this is what object.assign is. So I could kind of get into some immutable operations for time will, I'm going to defer that.

[00:03:16] But what object.assign does is it says, take from right to left and start assigning values. Or rather I think it does from left to right. It does it kind of in order, so it actually be from left to right as it assigns any non or any innumerable values to the new objects.

[00:03:38] We're saying take value and assign it to this object. And so in this case, it's going to be a course. Now if I wanted to add even another property is, so it does do it from left to right. So left, left, left, it's like it can say I want to also set tittle to something else.

[00:03:58] And so I can overwrite this. It's sort of applying copying things over from the left side to the right side. And, I don't need this but what this does is that it basically creates a clone of this course object that we're setting in. Now what I'm also going to do is just for the sake of From a UX standpoint, so we're still not modified a shared title.

[00:04:33] I'm going to go this.original title equals value.title. All right. And notice it's complaining that I'm not implementing in JSON in it. That's totally fine. Let's save this and I am really hoping that this works. So TS let's throwing up let me save that. Let's hop in and of course, I forgot to update my template.

[00:05:12] So we go into the course details component. We are no longer binding to course, it's going to be selected course. Now what I also want to do instead of the title, we're gonna bind to original title. Because even though I've created a copy, even if this was selected course, is I would start editing in the form and it would still update there.

[00:05:42] So I'm breaking all shared kind of references. So let me go here, Oops. Okay, let me save this. Hopefully this works. There we go. And I'll close this. Now if I start editing this Then notice it didn't edit it up here. Also, when I cancel, what happens? Well, it just takes and it throws away my clone object like I haven't mutated into so I can go cancel.

[00:06:31] Nobody is the wiser, and so isolating state mutations at the component level is really, really important because you saw how that trickled up. And changing it here, and it's changing it over here, which is bad. And so that's how you isolate state mutations.