Referencing elements inside a writable List

[martinprad0]

I have the following list of Player objects {id:number, name:string} which is a globally stored element made using writable:

// $lib/global.ts
import { writable } from 'svelte/store';
import type { Player } from '$lib/types/Player';
export const players = writable<Player[]>([]);

Now, in my main svelte file I want to reference the first player using player = $state($players[0]), but this only creates a copy, not a reference of the first element in $players. However, what confuses me is that $players[0] is a reference of this first player, and when I call a player variable with {#each $players as player} it's also a reference.

<!-- /src/routes/App.svelte -->
<script>
  import { Button } from "flowbite-svelte";
  import { players } from "$lib/global";
  import { playersData } from "$lib/playersDemo1.js";
  $players = playersData;
  let player = $state($players[0]);
  $inspect($players)
</script>

<p>player.name: {player.name}</p>
<p>$players[0].name: {$players[0].name}</p>

<!-- Left Button -->
<button onclick={() => player.name = player.name+"a"}>Change player.name</button>
<!-- Right Button -->
<button onclick={() => $players[0].name = $players[0].name+"a"}>Change $players[0].name</button>

{#each $players as player}
  <p>player name: {player.name}</p>
{/each}

This video shows exactly what I mean:

The button on the left is changing the variable player but doesn't trigger any updates on $players and the button on the right does the exact opposite. My question is how do I make player be a reference instead of a copy.

[brunnerh]

It's not a copy and this is not about whether a reference or copy is used either.

$state wraps objects/arrays in a Proxy, so anything referencing that same proxy will update. If you pull a part of an object/array from a store, the connection to the store is lost, regardless of whether $state is used after that or not.

Stores do not have fine-grained reactivity, so any change to some contents of the store has to also signal those changes to the store itself for reactivity to work. (If you reference the store directly or indirectly via an #each, Svelte will automatically take care of that.)

So if your goal is that the store is still notified, you could either change the contents of the store to be a full state proxy from the top down (wrapping the entire array) or manually trigger the store via $players = $players after any relevant changes.

I would recommend completely avoiding stores if you can and work directly with $state.

---

Also, please do not cross-post, it wastes people's time.