Creating the Initial State of the Application

In order to have something displayed in our application, we'll need to have an application state where we can store everything. This will be our single source of truth where we store all application data in one place and access it from anywhere. For this, we're going to use a writable store.

Stores in Svelte are special objects that have a subscribe method that allows interested parties to be notified whenever the store's value changes. A writable store also has the update and set methods so that it can be modified.

Stores are a perfect fit for our case because they can be accessed anywhere, globally, from multiple unrelated components. This gives us a centralized place where we can store our application's state.

Set the initial state

Let's create a state.js file at the root of our src directory and see what we're going to have.