Best way to group different stores in a main object - Svelte

Question

So I've been trying out a bit of Svelte for the last past week. I wanted to have some simple component, let's say a counter that will be managed by a store (the same way it is shown on the API documentation). I will also have a component for a todo list with his own store and another one that will throw random facts again with his own store.

Now I want to have a big main object, something like:

    const bigObject = {
      counter,
      todos,
      randomFact 
    }

I am able to get that object with the initial values from my components but I can't make it reactive, meaning that if I update the counter value, or request another random fact, I want the bigObject to be update with those news values...

How do you guys approach this situations?

Thanks,

Answer 1

The answer is quite simple. Let's suppose we have two files :

• bigObject.js that defines your store object,
• MyComponent.svelte which is a Svelte component that uses bigObject.

Then you can achieve what you want this way :

  // bigObject.js
  import { writable } from 'svelte/store'
  export const bigObject = writable({
    counter: 0,
    todos: [],
    randomFact: "Svelte can be easy",
  })

  <!-- MyComponent.svelte -->
  <script>
    import { bigObject } from './bigObject'
  </script>

  <p>
    count is : {$bigObject.counter}
  </p>
  <button on:click={() => $bigObject.counter++}>
    Increment
  </button>

So far, it can't be easier. An update from any component will trigger in every component that uses bigObject.

Things become a bit more complex when you need to define store methods that mutate bigObject. Let's suppose we want to create a function setCounter that set the counter to the given value :

  // bigObject.js
  import { writable } from 'svelte/store'

  const { subscribe, set, update } = writable({
    counter: 0,
    todos: [],
    randomFact: "Svelte can be easy",
  })

  export const bigObject = {
    subscribe,
    set,
    update,

    setCounter: value => update(self => {
      // ... write all your function's code here
      // self is a reference to your object
      self.counter = value
      return self  //!\\ this is important! Don't forget it
    })
  })

  <!-- MyComponent.svelte -->
  <script>
    import { bigObject } from './bigObject'
  </script>

  <p>
    count is : {$bigObject.counter}
  </p>
  <button on:click={() => bigObject.setCounter(42)}>
    Set to 42
  </button>

As a final note, keep in mind that when you alter any property of your store object, all components that refer to this object will be updated, because Svelte will not consider "this single property has changed" but rather "this whole object has changed".

Answer 2

tl;dr; Svelte stores are great for small reactive state pieces but are not a replacement for large state management solutions like redux.

The nature of sveltes stores are more focused on smaller bits of state management. I believe a package like redux would be better suited to the task of larger state management.

If you have values that are a composite of multiple pieces of state you can use derived state. I believe that you could create a custom store to handle larger state but I don't believe that is really what you are asking and it would become more complicated than a solution like redux.