State Management with Svelte Stores

Every user interface control has a state. A checkbox has a checked-unchecked state. A textbox’s state is its current input value. A table’s state is the data displayed and the columns currently being sorted. Sometimes when you have multiple user interface controls present across the screen at the same time, you need to synchronize the state across them—this is where state management comes in.

In this chapter, we are going to discuss managing states in Svelte using Svelte stores. We will start with why we should use Svelte stores, and then discuss tips that will help you when using Svelte stores for state management.

Next, we will go into the topic of using state management libraries. We will talk about why and how to use them. With that, we will be going through a few examples of integrating third-party state management libraries into Svelte through Svelte stores.

This chapter includes sections on the following topics...

Technical requirements

The code in this chapter can be found on GitHub: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter10.

Managing states with Svelte stores

When building an interactive user interface, the first thing we consider is determining the necessary states to represent the various components and interactions.

For example, in the following snippet, I have a login form that has a few components, including two inputs, one checkbox, and one button:

<Input name="username" />
<Input name="password" />
<Checkbox label="Show Password" />
<Button>Submit</Button>

Each of the Svelte components has multiple states, as outlined here:

• The <Input /> component has an input value state and an error state set during validation
• The <Checkbox /> component has a checked/unchecked state, checked to reveal the password in the input
• The password <Input /> component has an additional state to reveal/hide the password
• The <Button /> component has an enabled/disabled state, disabled when the form is incomplete...

Using state management libraries with Svelte

If you google State management library for frontend development, at the time of writing, you will get list after list of libraries, such as Redux, XState, MobX, Valtio, Zustand, and many more.

These libraries have their own take on how states should be managed, each with different design considerations and design constraints. For the longevity of the content of this book, we are not going to compare and analyze each of them since these libraries will change and evolve over time and potentially be replaced by newer alternatives.

It is worth noting that some of the state management libraries are written for a specific web framework. For example, at the time of writing, the Jōtai library (https://jotai.org/) is written specifically for React, which means you can only use Jōtai if you write your web application in React.

On the other hand, there are framework-agnostic state management libraries. An example is XState (https...

Summary

In this chapter, we learned about how we can manage our application states with Svelte.

At the beginning of the chapter, we discussed some of the tips for managing states in Svelte through a Svelte store. These tips will be useful to you as your Svelte application grows larger and more complex.

One of the tips that we discussed is using state management libraries to manage data changes and data flows. That’s why we spent the second half of the chapter exploring how we can use state management libraries in Svelte, by transforming the state management libraries’ state into Svelte stores.

In the next chapter, we are going to explore how we can use a combination of both a Svelte context and a Svelte store to create renderless components—logical components that do not render any content.