Solid
Solid reactivity는 createSignal이 반환하는 accessor와 setter를 중심으로 동작합니다. @ilokesto/store를 연결할 때는 외부 store를 source of truth로 두고, 현재 snapshot을 Solid signal에 반영하세요.
signal adapter 만들기
import { createSignal, onCleanup, type Accessor } from "solid-js";
import { Store } from "@ilokesto/store";
export function useStoreSignal<T>(store: Store<T>): Accessor<Readonly<T>> {
const [state, setState] = createSignal<Readonly<T>>(store.getState());
const unsubscribe = store.subscribe(() => {
setState(() => store.getState());
});
onCleanup(unsubscribe);
return state;
}이 helper는 컴포넌트나 컴포넌트 아래에서 만들어진 함수처럼 Solid owner 안에서 호출하세요. onCleanup()이 외부 구독을 그 owner lifecycle에 연결합니다.
컴포넌트에서 사용하기
import { Store } from "@ilokesto/store";
import { useStoreSignal } from "./useStoreSignal";
type CounterState = { count: number };
const counterStore = new Store<CounterState>({ count: 0 });
export function CounterButton() {
const counter = useStoreSignal(counterStore);
const increment = () => {
counterStore.setState((prev) => ({ count: prev.count + 1 }));
};
return (
<button type="button" onClick={increment}>
Count: {counter().count}
</button>
);
}Solid에서는 accessor를 호출해서 signal 값을 읽습니다. JSX와 TypeScript 코드에서 counter()를 사용하세요.
write는 외부 store에 유지하기
Solid signal은 외부 store를 보여주는 view이지 두 번째 상태 소유자가 아닙니다. 미들웨어, 교체 semantics, Object.is no-notify 동작, Solid 밖의 subscriber가 모두 일관되도록 store.setState()로 업데이트하세요.
Equality 참고
store가 같은 참조로 업데이트를 계산하면 @ilokesto/store는 알리지 않습니다. 객체 상태가 바뀌었다면 새 객체나 새 배열을 반환해야 외부 store와 Solid observer가 모두 교체를 볼 수 있습니다.