Get started
Install Solux, create a store, and connect it to a Solid component. No provider is required for direct store access.
Install in a SolidJS project
Use an existing SolidJS + TypeScript application. SolidJS and RxJS are peer dependencies; the current library manifest declares solid-js ^1.9.9 and rxjs ^7.8.2. This website uses SolidJS ^1.9.10. Installing without a version selects the registry release, currently 4.0.1.
bun add @carere/solux solid-js rxjs
# Or with npm:
npm install @carere/solux solid-js rxjsCreate events and a slice
Keep creation inside a factory. Each independent store gets its own slice and fresh initial-state objects. Event creators can be shared because they do not own store state.
import { combineSlices, configureStore, createEvent, createSlice } from "@carere/solux";
export const increment = createEvent<number>("counter/increment");
export const reset = createEvent("counter/reset");
export function createCounterStore() {
const counter = createSlice({
initialState: { value: 0 },
handlers: (builder) =>
builder
.addHandler(increment, (state, { payload }) => {
state.value += payload;
})
.addHandler(reset, (state) => {
state.value = 0;
}),
});
return configureStore({ rootSlice: combineSlices({ counter }) });
}
Read state where Solid tracks it
Read state.counter.value inside JSX or a reactive computation. Destructuring a primitive property outside a tracking scope captures its current value and loses future reactive reads. Keep chart instances, DOM nodes, and cleanup functions outside state.
import { createMemo, onCleanup } from "solid-js";
import { createCounterStore, increment } from "./counter";
export function Counter() {
const store = createCounterStore();
const doubled = createMemo(() => store.state.counter.value * 2);
// Unreleased: the creator explicitly owns disposal.
onCleanup(() => store.dispose());
return <button onClick={() => store.dispatch(increment(1))}>
{store.state.counter.value} (doubled: {doubled()})
</button>;
}Dispatch an event to see it here.