Store utilities

createStore

createStore creates a reactive store and setter function for structured state.

Import

import { createStore } from "solid-js/store";

Type

type Store<T> = T;

interface SetStoreFunction<T> {
  (setter: T | Partial<T> | ((prev: T) => T | Partial<T>)): void;
  (...path: unknown[]): void;
}

function createStore<T extends object = {}>(
  store?: T | Store<T>,
  options?: { name?: string }
): [Store<T>, SetStoreFunction<T>];

Parameters

`store`

Type: T | Store<T>

Initial store value.

`options`

`name`

Type: string

Debug name used by development tooling.

Return value

Type: [Store<T>, SetStoreFunction<T>]

Tuple containing the store proxy and its setter.

Behavior

The returned store is read through a proxy, and property reads track at the property level.
The setter supports both top-level updates and path syntax for nested updates.
Object updates shallow-merge by default, while single-array updates replace array contents. Setting a property to undefined deletes it.
Getters defined on the initial object remain available on the store.

Examples

Basic usage

import { createStore } from "solid-js/store";

const [state, setState] = createStore({
  user: {
    firstName: "John",
    lastName: "Smith",
  },
});

setState("user", "firstName", "Jane");

Getter

import { createStore } from "solid-js/store";

const [state] = createStore({
  user: {
    firstName: "John",
    lastName: "Smith",
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
});

Report an issue with this page

Contribute