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

The "Add & Remove from the MobX Store" 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 constructs the add and remove methods for the MobX store, giving a high-level description of the state management that is occurring within the application.

Preview
Close

Transcript from the "Add & Remove from the MobX Store" Lesson

[00:00:00]
>> Steve Kinney: And so with the item, right, for add we want to go ahead and,
>> Steve Kinney: List.items.push[new Item] with all the properties in there. So I'm actually, before I had wrote destructure and I turned it into regular ones, I don't want to care too much about the order in there, I just want the value.

[00:00:30]
Actually we'll say value, I think that'll work. So take the value and then we want to pass a reference to this list so it can go ahead and remove itself.
>> Steve Kinney: So here's a new item. This is what your name is, and this is who I am when you need to ask me to remove you from this list, right, so it has a reference.

[00:00:49]
And before when we do this in redox, we need to know the ID of everything. This is we just pointed the full object, right, cuz that referential quality will just work in this case cuz they are the same object. And then we'll do a action.bound.
>> Steve Kinney: Hold on, we'll actually do this.items.filter

[00:01:21]
>> Steve Kinney: So we get a reference to that item, and we'll do the trick we've done before. But we don't need to check the ID, we can literally look in memory, are you the one in memory that we had before?
>> Steve Kinney: Except we can't name them both item cuz that doesn't work.

[00:01:41]
>> Steve Kinney: We'll call this one item to remove.
>> Steve Kinney: So go through all the items, see are you the item to remove. And honestly like that is our state management piece, right. Where they're just objects that kind of communicate and talk to each other. A lot of the, it's effectively a graph provenance of a tree problem that we hadn't Redux and we'll talk a little bit about the trade offs at the very end.

[00:02:13]
But it's like this is an item has a remove method, when you call that it tells the list, hey, take me off the array. You have a toggle on the item which flips its Boolean value back and forth.

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