Made withSvelteClip

Svelte Tutorial for Beginners #31 - Updating Store Data

N

Net Ninja

Creator on the Svelte channel

Watch on YouTube ↗

18K viewsApr 29, 20208:19 runtime

Learn how to modify data in Svelte writable stores using the powerful `.update` method. This tutorial demonstrates a practical refactoring process, moving from a complex event dispatching system to a streamlined, centralized state management approach. You'll see how to update…

Chapters

#svelte#clip#frontend

Updating Svelte Writable Stores

The primary method for modifying a writable store's value based on its current state is the .update() method.

.update() Method: This method accepts a callback function as its only argument.
Callback Function: The callback receives the store's current value as a parameter.
Return Value: The callback must return the new value that the store will be updated to.

Tip
The .update() method is ideal for situations where the new state depends on the old state, such as adding an item to an array or incrementing a counter.

Example: Adding a New Item to a Store Array

To add a new poll to the PollStore, which contains an array of poll objects, we use .update() to prepend the new poll.

// In CreatePollForm.svelte
import PollStore from '../stores/PollStore.js';

// poll is a new poll object
PollStore.update((currentPolls) => {
  return [poll, ...currentPolls];
});

Refactoring from Events to a Store

This video refactors the application to communicate directly with a central store instead of passing data up the component tree with event dispatchers.

`CreatePollForm.svelte` Refactor

The form now imports the PollStore and uses PollStore.update() to add a new poll directly to the store.
The original event dispatch is removed, simplifying the component.

Note
An add event is still dispatched, but without data. This event is used solely to signal the parent App.svelte component to perform a UI change (switching which component is visible), demonstrating how events can still be useful for UI coordination.

`PollDetails.svelte` Refactor

Logic for handling a vote is moved from App.svelte directly into PollDetails.svelte.
PollStore.update() is used to find the specific poll that was voted on, update its vote count, and return the modified array.

// In PollDetails.svelte
PollStore.update((currentPolls) => {
  // 1. Create a copy of the polls array
  let copiedPolls = [...currentPolls];

  // 2. Find the poll to update by its ID
  let upvotedPoll = copiedPolls.find((poll) => poll.id == id);

  // 3. Update the vote count
  if (option === 'a') {
    upvotedPoll.votesA++;
  } else if (option === 'b') {
    upvotedPoll.votesB++;
  }

  // 4. Return the updated array to the store
  return copiedPolls;
});

Final Code Cleanup

After refactoring, several pieces of code related to the old event-based system become redundant and are removed.

Unused event handlers (on:vote) in App.svelte.
Event forwarding in middle-man components like PollList.svelte.
The createEventDispatcher import and dispatch function calls in PollDetails.svelte.

Important
This cleanup results in a much simpler and more maintainable data flow. Components become more self-contained, as they can now interact with global state directly without needing to pass data or events through intermediate parents.

Introduction: The Problem with Event Dispatching

Okay then, so we are subscribed now to the Polls store right here and we're cycling through that data inside the Polls store right here and outputting those inside the Poll Details component. So we can see that poll right here and everything's working, we're hooked up with this store. But at the minute if we try to vote, then nothing works and in fact, we get an error. And also if we try to add a new poll, nothing works and we get an error.

And that's because currently, when we try to do either one of those, we are emitting custom events and we're trying to send those back up to App.svelte where we handle those and add them to data in App.svelte. Now, we don't want to do that anymore. We don't want to send data back up, we just want to communicate directly with the new store that we've created. So we can either add a new poll to the store via the form, or we can update the votes when we click on one of those options in the polls. So we will look at how we can update the store data in this video and we're going to delete all the old unnecessary code that we had when we sent those events and data up to App.svelte. So let me start with the add poll or create poll form right here.

Updating the Store with New Data

So at the minute, this is where we're dispatching the events and we're sending that poll up. Now, I still want to dispatch the add event right here, and there is a reason for that which I'll tell you in a minute, but we no longer need to send the poll up as data because we're not going to add data to App.svelte anymore. We're going to do that directly to the store.

So what I'm going to do is now import the store instead at the top. So I'm going to say import PollStore from and I need to come out of the current directory, then forward slash, stores and it's PollStore.js. Okay, so we've imported that. Now we need to update the data in that store and we need to do it around about here.

So let me do that by first of all creating a comment to say what we're going to do: save poll to store. And then underneath it's as simple as getting the store which we import, so PollStore.update(), and this fires a callback function where we take the correct data from the Poll store that's there before we add something. So currentPolls we'll call that, but you can call it what you want, and we take that into a callback function. And then all we do is we return a value. And the value that's returned is going to be what this is updated with. So if we return 1 then the whole value of PollStore right here becomes 1. Okay, now that makes no sense. Instead, we want to return a new array with all of the polls including the new poll that we create inside that array. So we'll pass poll into it and also spread out the currentPolls as well. So everything that's already in that store plus the new one as well. We return that value and whatever value we return, that is the thing that now is contained within the store. Okay.

Handling UI State Side-Effects

And I said I'm also still dispatching this add event which goes up to the App component right here. And the reason I'm doing this and we're still handling that add event right here is because if we take a look at handleadd, not only do we add the new poll to the polls but we also change the active item to current polls. So that when we add a new poll over here and we click Add Poll, it goes back to this component view instead.

So let's delete this stuff we don't need where we add new data and instead just update activeItem. That's all we need to do here. So that's done. So we can save that and now let's try this out. So let's go and add a new poll, blardy blardy blar and add it, and now we can see this works. So the polls are now being added to the store. So these things still don't work, we still get an error when we try to vote. So now let's address that issue.

Refactoring the Vote Functionality

So to do that we need to go to the PollDetails. So let's open PollDetails and right here where we say handleVote, this is where we're dispatching the custom vote event that's being forwarded inside PollList right here up to the App component. And we can see right here on:vote and it's being handled right here in handleVote. So instead, most of this stuff right here can now be taken out of here. So I'm going to cut that and I'm going to go to PollDetails. And instead of dispatching an event right here, we don't need that anymore. And in fact, I'll delete create event dispatcher, we don't need that, and the dispatch function right there, we don't need that. And in fact, while we're at that I'm going to do that from the CreatePollForm as well. We don't need the create event dispatcher... oh no, we do. Sorry, my mistake, because we're still dispatching an event. Sorry, my mistake. Anyway, we've deleted it from the PollDetails and that's fine. And now I'm going to paste all of this inside here. So first of all, we don't need this line right here because we already have the option and ID, so let's get rid of that. Remember the option and ID came from down here where we pass them into the handleVote function. So it's going to either be 'a' for option or 'b' for option, and then the ID is passed in for that poll as well. So we still want to create a copy of the polls, we do want to do that. But before we do all this, we need to actually create the update function on the store. So let's import the store first of all. So import PollStore from and it's ./ to come out of the folder into stores, then we want the PollStore.js. Okay, so we have that.

Implementing the Vote Update Logic

And we saw how to update the store. We need to say PollStore.update(). This fires a callback function where we take the currentPolls and inside this callback function we return a new value. So all of this stuff right here now, I'm going to cut and I'm going to paste it inside this callback function right here. Okay.

So now what we're doing, first of all, is we're saying let copiedPolls equal to a new array where we're putting the currentPolls. Now this needs to change from polls to currentPolls, so that's the current data we get from the store. So we create a copy of that array and then we find the upvoted polls. This is exactly the same. And then down here, let me scoot this in, we're still doing a check to see whether the option passed in was 'a' or 'b' to decide which votes to up the vote for. And then finally instead of this, we need to return a new value and the value we want to return is the copiedPolls, right? So now because that value is returned, and the copiedPolls now contains the updated poll with the votes updated, by returning that value now the entire store has that returned array with the updated data. So I think that is just about it. Let me delete that spare line and the spare line down here.

Final Cleanup and Demonstration

Save this. And save this. In fact, we no longer need this handleVote function right here and we no longer need this listener right here. And in fact, we no longer need to forward the event from PollList so we can get rid of that as well. Let me save that and let's check this out in a browser.

So now if I try to vote, now it all works. And if I add a new poll and try to up those votes, everything is working. Sweet.

So now we've done that, we've hooked everything up with the store. In the next video, what I'd like to do is show you how to delete these polls by clicking on a delete button.