svelte-store-extended is still in beta, use with caution

svelte-store-extended

Svelte store extended has been created to ease quite a bit your state management within your application by provinding 3 usefull new methods:

function action(name: string, a: ActionHook<T>): Function {}

function selector(name: string | ((strValue: T) => any)): Readable<any> {}

function on<R>(action: Action, hook: (actionState: R, storeState: T) => T

It is really easy to use and straightforward

App.svelte

<script lang="ts">
  import { darkMode, toggleDarkMode } from './store/settings';
</script>

<main>
  DarkMode: {$darkMode}

  <button on:click="{toggleDarkMode}">Toggle dark mode</button>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

settings.ts

import { store } from 'svelte-store-extended';

export const settings = store({ darkMode: false });

export const darkMode = settings.selector((state) => state.darkMode);
// or you can do the following
export const darkModeBis = settings.selector('darkMode');

export const toggleDarkMode = settings.action(
  '[Settings] Toggle dark mode',
  (state) => {
    state.darkMode = !state.darkMode;
    return state;
  }
);

settings.on(toggleDarkMode, () => {
  console.log('Dark mode changed');
});