Designing a store for birthdays

The code for this chapter includes a single store in the src/stores/birthdays.js file with the following content:

import { writable } from 'svelte/store';
export const birthdays = writable([]);

The idea of the birthdays store is to store whatever birthdays have been returned from the SvelteKit page load. It’s kept up to date by the page route component.

There’s also a new NextBirthday component that reads the store and displays a message at the top of the page alerting the user to the next upcoming birthday.

Stores aren’t necessary for this change

This feature could have been written simply by passing birthdays as a prop to NextBirthday. It’s certainly worth avoiding stores if you can simply use component props. This chapter’s code is intended to be educative only; in reality I would not use a store for this use case.

Figure 15.1 – The Birthdays application...