Store

import: @azure-net/kit/edges

Stores, like presenters, are part of edges-svelte and in an SSR project you must configure edges-svelte using edgesHandle (see the Project Setup section, or the edges-svelte documentation). Everything in createStore is also SSR-friendly as it completely follows the logic of createPresenter and differs only in that it provides access to working with states.

createStore

Creates a basic store, providing you with access to createState, createDerivedState, createRawState, more about them below.

createStoreFactory

This is a factory for creating stores. It repeats the essence of createPresenterFactory, which means it is needed to create stores with your dependencies.

State Primitives

• createState is a direct analog of svelte writable, but completely SSR-safe.
• createDerivedState is a direct analog of derived (not $derived, but derived)
• createRawState under the hood is $state. This is a lightweight reactive variable that does not require subscription, but with access through .value

Examples

import { createStore } from '@azure-net/kit/edges';
// As the first argument we must also pass a unique name
const MyStore = createStore('MyStore', ({ createState, createDerivedState, createRawState }) => {
    // Analog of writable
	const collection = createState<number[]>([]);
	// Analog of derived
	const collectionLengthDoubled = createDerivedState([collection], ([$c]) => $c.length * 2);
    // Analog of $state
    const justSomeState = createRawState<number>(0);

	const updateAction = (num: number) => {
		collection.update((n) => [...n, num]);
        justSomeState.value = num;
	};

	return { collection, collectionLengthDoubled, justSomeState, updateAction };
});

<script lang="ts">
    import { MyStore } from '${ContextName}/delivery/{FeatureName}';

    const { collection, collectionLengthDoubled, updateAction } = MyStore();
</script>

{$collection.join(', ')}
{$collectionLengthDoubled} <!-- 0 before clicking the button below, 2 after -->
<button onclick={() => updateAction(25)}>count update</button> <!-- Click will update the state, adding a new element to the array and changing justSomeState -->