Check out a free preview of the full State Management with Redux & MobX course

The "State Store Schema" Lesson is part of the full, State Management with Redux & MobX course featured in this preview video. Here's what you'd learn in this lesson:

Steve uses Normalizr to create the state store schema for the kanban board, describing how to transform the data using the schema and normalize functions in a way that most effectively enables access to users and cards.


Transcript from the "State Store Schema" Lesson

>> Steve Kinney: So we have this default state. What we're gonna do is we're gonna use normalizer to go ahead and figure out how to turn it into the data that we deserve, all right? So actually go instead of looking at it, we'll go ahead and implement it. I'm gonna create a new file, called normalized-state.js.

Cool. And now we'll go ahead, and we'll pull it in, we saw before, schema and normalize.
>> Steve Kinney: From this normalizer library. And we'll pull in that default state. Yeah and you might choose, do this as API results come in. That's totally cool.
>> Steve Kinney: I'll pull that in as well.

And now we saw before, we can create schema. So we'll say, a user
>> Steve Kinney: schema.Entity and we'll just say this is users. A card we saw before, is a new schema.
>> Steve Kinney: With the entity of cards, and it points to a user. Now you notice that the reason I had to define user first is because this one's gonna have to reference the user schema.

So there's a little bit of thinking here, but it's mostly just rearranging lines of code. All right, so we have a user, schema. I have a card that has an assigned past tense, assigned to a particular user. So these, it'll figure this all out as it gets this data structure in here and then we'll have a list.

>> Steve Kinney: Which we'll go ahead and we'll call it list, right? And it will have cards that will be an array of this card schema that we defined.
>> Steve Kinney: All right, so we're at this point most of the way there. What I'm gonna do now is I'm just gonna run it.

Now that I've defined the schema I'm just gonna run it through the normalization. So I'll say normalizedLists = normalize, I'll give the defaultState.lists. And we'll say that you're gonna get an array of list objects, cuz that's the way it was in my state. We're going to pull the list, which was an array.

And we'll be like, hey, I've kind of told you that what you're about to get is an array of lists. And you know that each list has an array of cards. Can you go ahead and just figure this all out for me? This is not technically anything that you couldn't write normally in standard JavaScript.

It's just that watching me do that is not the best use of your time. And arguably, having a library doing it consistently and stably, if you have a big enough team, is also probably helpful.
>> Steve Kinney: Which will be an array of users. All right, and now what we're gonna do is just kind of export our data.

I can even console log if we wanna see, but it's going to give me that data structure we saw in that run book, which there will be cards, which will have entities and IDs, lists, which will have the entities and the IDs, users, which will have entities and IDs.

Those entities will be objects. With the ID being the key, and the data being the value. This will be really useful when we go to pull it out of Redux. We'll export const lists,
>> Steve Kinney: To do a little bit extra reformatting to get it fully the way I want

>> Steve Kinney: Lists, what's the chance I've misspelled entities at some point?
>> Steve Kinney: Cool, it actually puts the IDs in a array called result which, it's just confusing for us. If you're cool with that that's fine. But I think as we talk about it to remember that result is an array of IDs is problematic.

So I've chosen to rename it ids as we're talking about it. It's more clear for you.
>> Steve Kinney: So users will be.
>> Steve Kinney: Normalizing as users, sweet.
>> Steve Kinney: Entities.
>> Steve Kinney: This one was a little bit different. We'll actually pull the ones from the giving cards. We didn't get it, we didn't find a schema for that.

So we'll just do it ourselves.
>> Steve Kinney: This will give me the data structure that I need. Again, we talked about it.
>> Steve Kinney: And we'll just export default all three.
>> Steve Kinney: Cool.

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