Skip to content

useStore

Alexandre Moreau-Lemay edited this page Sep 28, 2022 · 9 revisions
import { useStore } from "https://deno.land/x/fresh_store@v1.0.1/mod.ts";

Convenience function to create a Store. Multiple options can be provided, see StoreOptions.

Implementation

function useStore<T>(state: T, options?: StoreOptions<T>): Pointer;

Unless the override option is set to true, this function will NOT override an existing store, it is therefore safe to use to make sure a store exists, and can be use to access the same store accross multiple components.

Remarks

  • The state passed in the function is used to give the store an initial state if it does not already exists. Therefore, the first invocation of useStore sets the initial state for the store. If multiple components use useStore, the first rendered component will set the initial state of the store.
  • If no pointer is provided, a pointer will be assigned and returned.

Parameters

  1. state: T

The initial state of the store. If the store already exists, the state will NOT be overriden by default, unless the override option is set to true

  1. options?: StoreOptions<T>

See StoreOptions

Returns

  • Pointer

A memory address to access the store. If a pointer is provided in the StoreOptions, it will return the same pointer, if not, it will allocate a pointer and return it.

Example

// 1. Creating a store without any options
const store1Ptr = useStore(0);
console.log(Stores.get<number>(store1Ptr).state); // Output: 0

// 2. Creating a store with options
const store2Ptr = Store.newPointer();
useStore(0, { pointer: store2Ptr, onChange: (state) => console.log(state), });

console.log(Stores.get<number>(store2Ptr).state); // Ouput: 0
Stores.get<number>(store2Ptr).set((prevState) => prevState + 1); // Ouput: 1

StoreOptions

import { type StoreOptions } from "https://deno.land/x/fresh_store@v1.0.1/mod.ts";

Multiple options can be passed to useStore. This interface is a template for all options that can be provided.

Implementation

interface StoreOptions <T> {
    errorHandling?: StoreOptionsErrorHandling;
    observers?: Observer<T>[];
    onChange?: (state: T) => void;
    override?: boolean;
    pointer?: Pointer;
}

Type Parameters

  • T

Any serializable type. Must match Store type.

Properties

errorHandling: StoreOptionsErrorHandling Optional

See StoreOptionsErrorHandling

observers: Observer<T>[] Optional

Additional observers that need to be attached to the store.

onChange: (state: T) => void Optional

A "free" observer already configured to execure the callback when the state change.

override: boolean Optional

If set to true, it will override the store at the pointer's address if it exists.
Has no effect if the address is unallocated

pointer: Pointer Optional

A key or "pointer" to the store location in window.stores.

StoreOptionsErrorHandling

import { type StoreOptionsErrorHandling } from "https://deno.land/x/fresh_store@v1.0.1/mod.ts";

Defines how useStore should handle errors.

Remarks

  • The verbose option is independant from stopOnError. Therefore, the function can handle errors gracefully but still emit a console output for debugging.

Implementation

interface StoreOptionsErrorHandling {
    stopOnError?: boolean;
    verbose?: boolean;
}

Properties

stopOnError: boolean Optional

By default, useStore will silently ignore errors to allow the program to continue its execution. If stopOnError is set to true, the function will stop if an error is thrown and will rethrow it.

verbose: boolean Optional

If set to true, error messages will be logged in the console. By default set to false

Clone this wiki locally