Manages complex nested state in SolidJS using stores with fine-grained reactivity. Use when working with objects, arrays, nested data structures, or when integrating API responses into reactive state.
Instrucciones de origen · Vista previa de solo lectura
name
solidjs-stores
description
Manages complex nested state in SolidJS using stores with fine-grained reactivity. Use when working with objects, arrays, nested data structures, or when integrating API responses into reactive state.
SolidJS Stores
When to Use Stores vs Signals
Use Case
Primitive
Simple values (string, number, boolean)
createSignal
Objects/arrays where you update the whole value
createSignal
Nested objects/arrays with fine-grained updates
createStore
Complex state trees (app state, form state)
createStore
createStore
Creates a reactive store with fine-grained tracking on nested properties.
Signals are created lazily — only when a property is accessed in a tracking scope
Reading store.user.name in JSX creates a subscription to just that property
Updating store.user.name only triggers updates for subscribers of that exact property
// Only the specific <span> updates, not the entire componentreturn (
<div><span>{store.user.name}</span> {/* tracked */}
<span>{store.user.age}</span> {/* independently tracked */}
</div>
);
Setter Patterns
Direct value (shallow merge for objects)
// Shallow merge at top levelsetStore({ user: { name: "Jane", age: 25 } });
// Shallow merge — keeps unmentioned propertiessetStore({ user: { name: "Jane" } }); // age is preserved
// Set a nested propertysetStore("user", "name", "Jane");
// Set deep nested propertysetStore("user", "address", "city", "New York");
// Function form at any levelsetStore("user", "age", prev => prev + 1);
Array operations with path syntax
// Update item at indexsetStore("todos", 0, "done", true);
// Append to arraysetStore("todos", store.todos.length, {
id: 3, text: "Deploy", done: false,
});
// Update multiple indicessetStore("todos", [0, 2], "done", true);
// Range of indicessetStore("todos", { from: 0, to: 2 }, "done", false);
// Filter-based updatesetStore("todos", todo => todo.done, "text", prev =>`[DONE] ${prev}`);
// Dynamic update with functionsetStore("todos", 0, "done", done => !done);
produce — Immer-Style Mutations
For complex updates, produce lets you mutate a draft object.
produce: multiple changes to the same subtree, array mutations (push, splice)
reconcile — Efficient Data Diffing
Diffs new data against existing store data, applying only the changes. Essential for API responses.
import { reconcile } from"solid-js/store";
// Replace store data with API response, only updating what changedconst newData = awaitfetchTodos();
setStore("todos", reconcile(newData));
Options
// key — property used to match items (default: "id")setStore("todos", reconcile(newTodos, { key: "todoId" }));
// merge — push diffing to leaves instead of replacing objectssetStore("todos", reconcile(newTodos, { merge: true }));
Option
Default
Description
key
"id"
Property to match items across old/new data
merge
false
When false: referential check, replace if different. When true: deep diff to leaves.
Common pattern — resource + reconcile:
const [todos] = createResource(fetchTodos);
createEffect(() => {
const data = todos();
if (data) setStore("todos", reconcile(data));
});
unwrap — Extract Plain Objects
Converts a store proxy back to a plain JavaScript object. Useful for serialization or passing to non-Solid code.
When to use: Rarely. Primarily for interop with libraries that expect mutable objects (e.g., MobX-style patterns). Prefer createStore for most cases — the explicit setter makes state changes easier to track and debug.
Store Getters
Stores support JavaScript getters for derived values:
