Скачать или смотреть When to Use derived in Svelte Custom Stores

Discover the best practices for utilizing `derived` in Svelte custom stores. Learn how to manage game state effectively with insightful examples and solutions.
---
This video is based on the question https://stackoverflow.com/q/63651193/ asked by the user 'bholtbholt' ( https://stackoverflow.com/u/2316763/ ) and on the answer https://stackoverflow.com/a/63693667/ provided by the user 'Etienne' ( https://stackoverflow.com/u/7508148/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: When should I use derived in Svelte custom stores?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding When to Use derived in Svelte Custom Stores

If you're diving into Svelte and its store management, you might have come across the derived function while working on custom stores. The question on many developers' minds is: When should I use derived in Svelte custom stores? This confusion often arises when trying to manage different states in an application, like a game's various phases.

In this guide, we’ll explore the purpose of derived stores in Svelte and clarify when and how to use them effectively. We'll also take a look at an example involving game states to illustrate these concepts better.

The Problem at Hand

Imagine you’re developing a game that has three distinct states:

PRE_GAME

IN_GAME

POST_GAME

You want to create a custom store to manage these states and easily check if the game is in a specific state, like whether it is currently in PRE_GAME. The confusion arises around how to optimally use derived stores in your implementation.

Here’s a simplified version of the code you might be working with:

[[See Video to Reveal this Text or Code Snippet]]

In this setup, you have created derived stores to return boolean values indicating whether the game is in a specific state.

Clarifying the Purpose of Derived Stores

You might be wondering whether it’s possible to incorporate the derived methods directly into the gamestate store. Perhaps you wish to check the current game state more intuitively, like calling gamestate.preGame().

However, it's essential to understand that custom methods on stores are typically meant for mutating the state (for example, using set or update). Each Svelte store is primarily designed to provide a single getter — its current state. Here are three recommended approaches to using derived stores effectively:

Solution 1: Utilize an Object for State Management

Instead of using a string to represent the game state, you can encapsulate it within an object. This method could look something like this:

[[See Video to Reveal this Text or Code Snippet]]

You can then use a custom update function to manage these states efficiently.

Solution 2: Continue Using Derived Stores

As you've done, employing derived stores is an excellent way to represent only the necessary booleans. If you find yourself repeating the logic for each state check, consider sticking with this approach, as it keeps your code DRY (Don't Repeat Yourself):

[[See Video to Reveal this Text or Code Snippet]]

This way, you maintain clarity and ensure that the state logic is centralized.

Solution 3: Perform Calculations in Components

If you prefer a more component-centric approach, you can manage the state checks directly within your individual components. This helps keep your stores declarative and clean, limiting mutations to the store itself. You can create specific components dedicated to certain game phases to maintain separation of concerns.

Conclusion

In summary, utilizing derived with your custom Svelte stores provides a clean and efficient way to handle state management. Remember:

Keep your store simple. It should focus on its current state.

Use derived when you need boolean checks. It allows for a straightforward implementation.

Consider the structure of your state. Using an object may simplify your logic.

Ultimately, the goal is to keep your code logical, easy to read, and maintainable. By adhering to these principles, you'll be well on your way to mastering state management in your Svelte applications.

Feel free to share your thoughts or any additional tips you may have for Svelte state management in the comments below!