DEV Community

Cover image for What are Custom stores?

Posted on • Originally published at

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 {
        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();
Enter fullscreen mode Exit fullscreen mode

And in the App.svelte


    import { items } from "./shoppingcart";


    <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 {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;

    @media (min-width: 640px) {
        main {
            max-width: none;

Enter fullscreen mode Exit fullscreen mode

Refresh the page and it'll look like this


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

Discussion (0)