What are Custom stores?

What are Custom stores?

Typically in a store (Writable), there are three methods:

1. subscribe()
2. set()
3. update()

As long as we implemented the subscribe() method, the javascript object is a store.

A store provides reactive data that can change over time. What if we want to create stores that restrict updates? It makes sense on large web/mobile applications, where we put restrictions on other components to overwrite the store variables. In other words, we allow store variables to update within the store only.

To create a custom store:

1. Create a writable store in a function
2. Return subscribe() function on an object.

Let's assume we have a shopping cart, and we need to add or remove items from there. In this example, we only increase or decrease the count of the cart. We start with a simple prototype and then move to more complicated in the upcoming articles.

Create a new file shoppingcart.js under the src directory.

import { writable } from 'svelte/store'; function addOrRemoveCartItems() { const { subscribe, set, update } = writable(0); return { subscribe, add: () => { update(n => n + 1) }, // Shopping Cart doesnot contain Negative Items remove: () => { update(n => n <= 0 ? 0 : n - 1 ) }, resetCart: () => { set(0) } }; } export const items = addOrRemoveCartItems(); 

And in the App.svelte

<script> import { items } from "./shoppingcart"; </script>  <main> <p> Custom Store Example. </p>  <h1> Total Cart Items { $items }</h1>  <button on:click={ items.add }> Add to Cart </button>  <button on:click={ items.remove }> Remove from Cart </button>  <button on:click={ items.resetCart }> Remove All Items </button>  </main>  <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } @media (min-width: 640px) { main { max-width: none; } } </style>  

Refresh the page and it'll look like this

In this article, we learn about custom stores. See you in the upcoming articles.