Check out a free preview of the full Enterprise Architecture Patterns course
The "Defining State" Lesson is part of the full, Enterprise Architecture Patterns course featured in this preview video. Here's what you'd learn in this lesson:
Lukas demonstrates that modeling data objects in an application makes it easier to define and maintain state. Composing the state objects from existing data types makes the functionality in the component or application more clear.
Transcript from the "Defining State" Lesson
[00:00:00]
>> The reason why you define your objects and you spend time data modelling is so that you can then understand and define your state. Which state is nothing more than an object. Especially when you do it properly. So your state, your application under the hood is nothing more than a large data structure.
[00:00:27]
When something goes wrong in your application, it's because the underlying data structure, the state of your application, is not matching up with the things that you're trying to do with it. But start to think about state in an application is nothing more than a data structure, it's just an object.
[00:00:51]
So let's go back to the slides and let's start to define state. So we can say what is in state for a feature? Well, I would imagine you could have all the clients and then you might have a current client. And then from there you might have a new or empty client.
[00:01:17]
And then you could define some initial state. So, we're gonna do a challenge here pretty quick, but I'm going to do this piece and then we'll do the challenge. So, just I've been talking about these these objects we've been going around this but It's really easy for us to think about objects when we're talking about a single client object.
[00:01:46]
But when we start thinking about like feature state, depending on your level of I think maturity is a developer, that can be kind of an overwhelming thing. And so if you start at target about feature state at the top, but people oftentimes forget is that at the bottom of this.
[00:02:08]
All we're talking about, is data structures and objects and nouns. And so with that said, let me build some future state. So interface, clients state. What would we expect this to have?, well obviously clients And a currentClient. There's any number of things we could put in here, but for the sake of this, we're going to put a single client.
[00:02:47]
And then from here, let me also define a new client and so we're just going to initiate this with an empty client equals and we'll type this And ID is no First name is empty string last name is empty string and company is empty string. All right, so now we have this new client.
[00:03:20]
And let's go ahead and let's create some initial state. We're going to go with. Const initial Which is clients Equals just dragging this out just a bit. I'll put it back in a moment. So what dow e expect with this? Well, it's telling us. We'll go with client.
[00:04:03]
And what we have here, we can do something interesting with type script, if you're just using regular ES5 is that you would say this clients property, is this clients object. Now with es6 and above because they're the same we can just condensed that. So this is a really handy way to just say its clients and we're going to set the Initial feedback I spelt that wrong.
[00:04:45]
Right, current client. Thank you IntelliSense, there we go. Let me just save this And let's check this out. So we have our clients which is Peter and John and our current client is no,
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops