Apply Patches using Immer applyPatches to Synchronize State across Clients

Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

Instructor: [00:00] 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.

[00:26] 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.

[00:49] 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.

[01:19] 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.

[01:33] 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.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today