Stores Q&A

[00:00:00]
>> What if I fetch data directly in readable store? Is it good or better to fetch and pass data in store in component?
>> You can totally fetch data inside a readable store. So for example, if you're polling for some data, then doing that polling logic inside the readable store callback is a really good pattern.

[00:00:26]
That's something that I've used a lot in my own apps, and it's something that I recommend. Just remember to stop polling once the unsubscribe happens.
>> Is there a recommended way to persist Svelte store data upon page refresh? There are packages that intertwine Svelte stores with browser storage, but I was wondering if there is a reason there is no native way to persist stores in Svelte.

[00:00:54]
>> We're trying to be as unopinionated as possible about the way that you use stores. Things like local storage are pretty easy to implement with your own logic, but there also exist packages. And, there are opinions that people might have about exactly what you do with those stores.

[00:01:11]
So we don't wanna get too heavy handed and saying, this is the correct way to implement some of this stuff. The more that we can allow you to build your own abstractions on top of stores, the more flexible they'll end up being. And so yes, as the question said, you can install a package, I think there's a package called Svelte Local Storage Store or something like that.

[00:01:31]
I'm actually using that myself right now. And there's a whole bunch of other abstractions that people have built on top of stores that we wouldn't have thought of, and so we don't include them in the Svelte package itself.
>> How does store differentiate from Redux?
>> They both use the word store, but they're very different beasts.

[00:01:54]
A Redux store is kinda like a application level God object typically, the define state for your entire application. Whereas a Svelete store is just an atomic piece of state that you can create inside a component. You can create an application wide module, it doesn't really matter. So instead of having lots of different pieces of state inside a Svelte store, you typically have one thing, like a count, or the current value of some fetch operation, or something like that.

[00:02:24]
Whereas your Redux store includes the kitchen sink, yes?
>> Would it be more fair to compare it to a Cot React context?
>> No, and so Svelte also has a concept of context. I don't think there really is a React equivalent directly. There are some libraries in React like, what's the one that I'm trying to think of?

[00:02:50]
>> Someone was saying Zustand.
>> Yeah, I think Zustand is a similar thing, although I think that might even be doing some funky stuff to break out of the React scheduling lifecycle. If I recall, there's Recoil, that's what I'm thinking of. I think Svelte stores are probably most similar to Recoil from the React ecosystem.

[00:03:13]
But yeah, we will be talking about context later on, that is something that we have in Svelte as well.
>> Have you ever found it useful to have kind of a God derived store with everything, or do you like to keep it all atomic stores?
>> I've never personally found a use for it.

[00:03:29]
Admittedly, I haven't used Redux in anger. I mean, I've got angry with Redux, but I have never used it to actually build something. So, I probably not the right person to ask, I don't have a good sense of why you would want to have something like that. For me it just makes more sense to have the state itself be represented like a tangible first class thing.

[00:03:54]
>> There's one more question here. Reactive statements seem like the closest thing to React's useEffect, but there doesn't seem to be any way to clean up function in Svelte, is that true? Is there any thoughts about adding support for cleanup functions in a reactive statement?
>> So that's why you would use stores, stores give you that state-level life cycle.

[00:04:20]
And they're not bound to the component hierarchy in the same way that that useEffects are. So you can declare that logic wherever it needs to go and use it inside your components. Reactive statements, they are similar to useEffect and that you can log the current value of something in the same way that you would use useEffect for.

[00:04:43]
But they're also a little bit like useMemo, it will memorize values, so it's sort of a combination of both. But if you're doing something that does require cleanup, that is when you would use life cycle functions if it's bound to the component life cycle, and stores if it's bound to the state itself.

[00:05:04]
>> Can you give a couple production examples of stores in use?
>> Production examples of stores in use, well this app here is full of stores. We have stores representing which file is currently selected, whether the application is complete, or is it solved or unsolved state, stores everywhere.

[00:05:33]
I don't know how everyone else is using stores in their production apps, but that's a great question to ask in the Svelte discord, how are people using stores? You'll get a ton of answers from people who are using them in production apps and they'll talk about how they're doing that.

[00:05:48]
But yeah, they are used in any place that you have state that doesn't belong to a single component, stores are a great way to express it.