Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Store Store in Local Storage

    Michel WeststrateMichel Weststrate

    For an optimal user and developer experience, storing state in local storage is often a must.

    In this lesson you will learn:

    • Using onSnapshot to get notified about new snapshots
    • Storing snapshots in local storage
    • Restore a state tree from local storage
    • Verifying whether a snapshot conforms to a model using Model.is(...)
    reactReact
    ^16.0.0
    mobxMobX
    ^3.0.0
    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
    Transcript

    Transcript

    Instructor: 00:00 We now have a simple application, which can store our wish list, and to which we can add items or remove them. However, it's a bit sad that, as soon as we reload it, all our changes are lost. A very simple thing we can do is to at least improve our developer experience by storing the state of the wish list in local storage.

    00:20 To do that, I first extract this initial state we have here to a default initial state. Now, I'm going to check if, in local storage, we have some data present. If that is the case, then I'm simply going to parse the JSON, which is in the local storage, and use that as initial state.

    00:47 Another trick is that we can simply write our state to local storage by, again, using the onSnapshots function from mobx-state-tree. After we created the wish list, we can simply say, onSnapshots, whenever there's a new snapshot available, we're going to write it to our local storage.

    01:07 Since snapshots are basically free to obtain and since they're plain JSON structures, this is enough to preserve the state of our application. It should now be possible to preserve our state changes, even reloads. Now, it loads and the changes are preserved. This should improve our developer experience big time.

    01:31 There's one tricky edge case you probably want to deal with, and that is that the snapshots you have in local storage might, over time, no longer match any more of your model. For example, if a wish list entry has a newly acquired attribute that is not present in the snapshot, then you would get an exception while trying to instantiate that initial state.

    01:55 What we can do is to check whether the shape of our data still suffices for our models. I'm going to store this data temporarily, and I'm simply going to check if this JSON is a valid JSON for our wish list. If it's the case, only then I say the initial state for this application is the state you found in local storage.

    02:19 Now, everything still works the same, but this is just a safety guard, which is quite convenient to have if you change your models a lot. With that, we basically set up a very simple infrastructure to make sure the state of application is captured and stored in local storage.

    Discuss

    Discuss