Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/felipesharkao/solid-sm
No non-sense SolidJS global state management
https://github.com/felipesharkao/solid-sm
global-state redux solid-js state-management store zustand
Last synced: 26 days ago
JSON representation
No non-sense SolidJS global state management
- Host: GitHub
- URL: https://github.com/felipesharkao/solid-sm
- Owner: FelipeSharkao
- License: mit
- Created: 2023-04-09T03:16:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-12T18:34:24.000Z (almost 2 years ago)
- Last Synced: 2025-01-08T05:36:22.069Z (26 days ago)
- Topics: global-state, redux, solid-js, state-management, store, zustand
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/solid-sm
- Size: 55.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid SM
No non-sense global state management for SolidJS, inspired by Zustand.
```typescript
import { state } from "solid-sm"
type TaskState = {
name: string
done: boolean
complete(): void
}
type RootState = {
tasks: TaskState[]
addTask(name: string): void
}
const createTask = (name: string) => {
return state((set) => ({
name,
done: false,
complete() {
set("done", true)
},
}))
}
const rootState = state((set) => ({
tasks: [],
addTask(name) {
set("tasks", (t) => [...t, createTask(name)])
},
}))
```
## Features
- Only one function, for creating a state. That's it.
- Compatible with SolidJS functions and design patterns.
- Nestable. Create and update nested states easily.
## Motivation
Although Solid provides global state out of the box, dealing with nested states is complex and
requires a lot of boilerplate. This module aims to simplify that, reducing the necessary effort to
create idiomatic and performant designs.
## Usage
### Creating a new state
A state is a reactive object with data and actions that can mutate this data. Having actions mixed
with data is important because it allows consumers to handle the data without having to known how
the data was created. To create a new state, use the `state` function. It takes setup a callback
that returns the initial value.
```typescript
type CounterState = {
value: number
}
const counter = state(() => ({
value: 0,
}))
```
### Consuming a state inside a component
Inside components, states behaves as any other reactive object. You can access its properties inside
a reactive scope to subscribe it to changes in the property.
```typescript
function Counter() {
return
Counter: {counter.value}
}
```
### Creating actions to update a state
The state setup callback takes as parameter a `set` function that can update the state value after
it's initialized. With it, you can create actions that will allow the state to be updated by
consumers.
```typescript
type CounterState = {
value: number
inc(): void
}
const counter = state((set) => ({
value: 0,
inc(): {
// The passed object will be shallowly merged with the current value
set((s) => ({ value: s.value + 1 }))
// You can also pass the property that will be updated instead
set("value", (v) => v + 1)
}
}))
```
### Using actions in reactive scopes
Solid SM provides a helper function to unwarp actions from the state object. This is useful when
using the action directly as a event handler.
```tsx
type CounterState = {
value: number
inc(): void
}
const counter = state((set) => ({
value: 0,
inc(): {
set("value", (v) => v + 1)
}
}))
function Counter() {
const [inc] = useActions(counter, "inc")
return (
{counter.value}{" "}
Increment
)
}
```
### Creating nested states
Nested states are a way of updating part of a object inside a state without updating the parent
state. This simplifies the handling of complex data involving array of objects.
```typescript
type BookState = {
title: string
score: number | null
setScore(score: number): void
}
type AuthorState = {
books: BookState[]
addBook(title: string): void
}
const author = state((set) => ({
books: [],
addBook(title) {
set("books", (b) => [
...b,
state((setBook) => ({
title,
score: null,
setScore(score) {
setBook("score", score)
},
})),
])
},
}))
```