Immutable CRUD Methods Practice

[00:00:00]
>> I'm going to do the challenge at the same time that you're doing it. And let's just go through and let's fix these methods here. That's essentially the challenge, so, for projects go through and let's add in your higher order functions to make this work. So we need to update our methods to properly modify state.

[00:00:32]
So, let's go here and the one thing that we're going to do so. I'm gonna do this on clients even do this on projects. That we need to make sure that we're signaling, we are returning clients state. So I'm gonna go through and I'm just going to Set a return type.

[00:01:06]
Now what I could also do is set it here as well and sometime If it's super obvious what it is I may just for the sake of time opt to not strongly type it. So I just for the sake of space and different things, I'm not going to strongly type all of this.

[00:01:35]
But just know that in most cases I would. So, when we want to load clients, what does that look like, well, we know that we need to return an object that matches client state. So it's gonna have, clients and It's going to also have. Current client. Now, in this case we're not modifying.

[00:02:20]
The current client, so we're just going to say take this and set it and just set it what it is, we're not dealing with that. But over here, what we are doing is we're saying, we're going to take and we're going to load, in this case, let's assume that if clients come in, you're just going to load them all.

[00:02:44]
And so now what we're gonna do is we're just going to take, and we're gonna say it returned the state, but in this case, whatever the clients were, we're just gonna return it with the new clients. And so now we're saying little clients, so this is where you would say I've just got a client from the server, drop them in.

[00:03:10]
Now, let's do select client, the clients aren't going to change. So we're just going to go state clients but what is going to change is the client and so we just update that there. Now, if we want to clear the client what we would do is we would just set this to no.

[00:03:46]
And more than likely if I dispatched an object like this, or an action object that I probably would not put a payload on this. And so what this would actually probably look like is it would have a single parameter and down here, I would just pass state in.

[00:04:07]
Because it doesn't need a payload to be successful in this particular operation and from here, now this is where this gets interesting. We need to add a client well, state.currentclient because we're not doing anything with this. But what we need to do is we need to take the current clients and we need to create a new array.

[00:04:42]
And push, the current clients in, but then add in, our new client. And so now, using an immutable operation, we're taking we're saying, take the clients, create a new array, put the existing clients in there, but then just add this new client, at the end. Now let's go to delete, we'll do this one, it's a bit easier.

[00:05:08]
And we're going to filter over clients and within this, and so I'm going to just because you will have a shadow variable here. We're going to take client and we're just gonna make sure that the client ID does not equal the client ID that we pass in. So this is how this is being filtered out, now, let's go up to the top one here and let's do this one.

[00:05:56]
So this is probably gonna be in my opinion probably the most complex one. And we're going to loop over and we're going to look for the client that we want to update. And so, we'll go here and we'll break this into a new function block or a new block.

[00:06:19]
And we're going to essentially return. One of two things, either the client that we're iterating over or a new cloned object. So if the client ID matches the client that we want to replace we're just going to go object.assign. We're going to create a new object and we're just going to pass in the client.

[00:06:58]
Or we are going to just return. The existing client that we're iterating over and leaving the current client alone. And so this is how you flesh out or you can essentially manipulate a collection in an immutable fashion. So, one of the things that I do quite a bit, and if you watch the production angular course, is that I mock out a lot of APIs.

[00:07:37]
Or a mock out that functionality either in a façade or in an API to reduce the dependency on the server team. And this is typically what I'm doing every single time is, this is how you add an element to a collection. This is how you update an element to a collection, and this is how you delete or remove an element from a collection.

[00:08:04]
And so I would say these three methods, specifically this part right here, is something that I use over and over and over again.