CODEWITHSUNDEEP
sveltesvelte-3svelte-store
Nadeem Ahmad
Nadeem Ahmad

Reputation: 745

Sharing the state across unrelated components - Svelte

I am working on a svelte application, where I have created a store that I am updating on certain events. I have imported the store in another component with a different directory. I have subscribed to the store, so whenever any change is made on the store in one place, it should reflect the change in the subscribed component, but unfortunately, it doesn't work for me.

The Store

//Both with initial state as an empty array
export const current_embeds = writable([])
export const current_deletes = writable([])

The script where I am updating the store

btn.onclick = e => {
  e.preventDefault();
  e.stopPropagation();
  const linkdata = ctx.remove(vlink);
  if (linkdata) {
    //Updating the store
    current_deletes.update((prevState: Array < any > ): Array < any > => {
      return [...prevState, { ...linkdata
      }]
    })
  }
};

Subscribed component

//Listens to changes 
current_embeds.subscribe(data => console.log('CURRENT EMBEDS NAV --- ', data));

current_deletes.subscribe(data => console.log('CURRENT DELETES NAV --- ', data));

Upvotes: 0

Views: 326

Answers (1)

grohjy
grohjy

Reputation: 2149

From your code snippets I’m not sure how do you handle subscribed component.
Here is a working REPL for your case:
https://svelte.dev/repl/44551e32530c46a19a3752b53a5e7732?version=3.24.1

What I noticed is that you must import and use your subsribed component (Comp.svelte) in main-app (or it’s subcomponent) in order to svelte recognize and run your subscribed component. I don’t know how to ”activate” component in <script> part.

Upvotes: 1

Related Questions