[MST] Store Store in Local Storage

Posted 2020-10-22 Answer1215

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(...)

 

let initialState = {
    items: [
        {
            name: "LEGO Mindstorms EV3",
            price: 349.95,
            image: "https://images-na.ssl-images-amazon.com/images/I/71CpQw%2BufNL._SL1000_.jpg"
        },
        {
            name: "Miracles - C.S. Lewis",
            price: 12.91,
            image:
                "https://images-na.ssl-images-amazon.com/images/I/51a7xaMpneL._SX329_BO1,204,203,200_.jpg"
        }
    ]
}

if (localStorage.getItem("wishlistapp")) {
    const json = JSON.parse(localStorage.getItem("wishlistapp"))
    if (WishList.is(json)) initialState = json // check whether the structure is changed or not
}

const wishList = WishList.create(initialState)

// if the snapshot changed, add to the localstorage
onSnapshot(wishList, snapshot => {
    localStorage.setItem("wishlistapp", JSON.stringify(snapshot))
})