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

    Apply Patches using Immer applyPatches to Synchronize State across Clients

    Michel WeststrateMichel Weststrate
    reactReact
    ^16.8.6
    javascriptJavaScript

    Continuing on the previous lesson, in this one we will make sure that clients can receive patches, and apply them to their local state so that we get real time synchronization. This lesson introduces the “applyPatches” API.

    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

    Instructor: It is time to figure out how we can apply the patches to our local states once we've received them. Let's start again by updating our unit disk from the previous lesson. To apply patches as utility from inaudible , apply patches once we import. Then we can prove that applying the patches basically results in the very same state.

    If we apply the patches that were generated again to the original state, then we have something that again equals the next state as if we've just called the actual reducer. We can latter apply patches to get that next state. Now, let's make sure that you can do that in our reducer, which we captured all of our logic.

    We're going to extend our reducer a little bit with a new action called apply patches with apply patches we've received to the draft. This makes it possible to rewrite the test we just wrote, and this time use the reducer instead of applying patches directly. We save it, and it works.

    Time to wire up those things. Now we know what to do when receive the changes. Instead of renting them to the console, we again call our reducer to calculate and store a next state.

    Note that in this case, we use GIFs reducer directly because we don't need the patches in this case, because we are receiving patches. We don't need to distribute them anymore. Let's try it. Here we have our two clients again. If we make change in one, we see it happening and the other one.