1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Simplify Deep State Updates using Immer produce

    Michel WeststrateMichel Weststrate
    javascriptJavaScript

    Our “app” now stores it state using immutable values. However, that wasn’t easy. Luckily Immer can help us to write logic in way more straight-forward ways, without loosing any of the benefits of immutability. We will introduce the concepts “produce”, “draft” and “recipe”

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Presenter: That stuff wasn't easy. If reading back a logic isn't trivial. For example, when you think about what's happening here, is that we're just expressing that we want to add something to our collection. But instead what we're doing, every object, every parent in that data tree, we generate a new version for that. For toggling the reservation, it's even worse.

    This will work, but this code isn't easy to write. It isn't easy to read either. What if we could write these things just very naively? What if we just could say I just want to put a new GIF to that GIFs collection.

    For toggle reservation, I want to find that single GIF that I'm interested in. If I found it, I'm just going to modify its reserve by property, because that is what I conceptually want to express.

    Now let's save this. We'll see that all of this horribly fail again, which makes sense, because we breaking the rules of immutability, here, we just modifying the data values. However, I think you and I can both agree that this code better expresses the idea we want to express. This is where Immer comes in.

    Let's install Immer. Immer's core API is pretty small -- it's just one function. That function is called "produce." What produce does, it takes an existing piece of immutable data and you give it a function, which we call a "recipe." That recipe function, it takes a draft version of that state and you can modify it as freely as you want.

    We can just push onto the collections of that draft, and we can just modify properties of that draft. And something magical happens -- all our tests succeed again. What is happening? What is Immer doing?

    The easiest way to think about Immer, is to see it as your personal secretary. You give it a letter, and it brings you back a copy of the letter. You start scribbling on top of that copy. You are making notes and you're scratching things out and you're making it ugly all over the place.

    It is fine because, what happens is that you give that copy on which you wrote, you give it back to your secretary. Your secretary will check, "You are using these sentences. You are cracking that, and you are scratching this." Based on what you did with that draft, it will produce for you your nicely next immutable state.