Lesson 5: Merge: CRUD

Until now, every stream used merge: 'set' which replaces the entire value on each update. For lists of items, merge: 'crud' is better.

How CRUD merge works

The store holds an array. Three event names modify it:

• 'created' - appends the item to the array
• 'updated' - replaces the item with the matching id
• 'deleted' - removes the item with the matching id

The key option (default 'id') tells the merge which field to match on.

Try it

The stream is already set up with merge: 'crud'. Add three RPCs:

1. addTodo(text) - creates a todo with id (use crypto.randomUUID()), text, and done: false. Push it to the array and publish with event 'created'.
2. toggleTodo(id) - finds the todo, flips done, and publishes with event 'updated'.
3. deleteTodo(id) - removes the todo from the array and publishes with event 'deleted'.

Then update the component: add an input + form to create todos, checkboxes to toggle, and a delete button for each.