Selector 동작
selector는 adapter-level projection function입니다. snapshot을 받고 underlying store state를 바꾸지 않으며 reactive reader가 받을 값을 결정합니다. object state는 Readonly<T>이고 callable state는 exact T로 유지되어 임의의 generic/overloaded signature와 선언된 own-property modifier를 보존합니다. 전체 state reactive 결과와 lifecycle 밖의 readOnly() snapshot도 같은 계약을 사용합니다. plain-state writer는 mutable next-state와 updater 계약을 유지하고 reducer writer는 typed action을 받습니다.
공통 shallow 비교
모든 adapter(React, Vue, Solid, Svelte, Angular)는 selector 결과가 notification을 발생시킬지 결정하기 위해 동일한 1-level shallow 비교를 사용합니다. zustand v5 패턴과 같습니다.
| 값 타입 | 비교 방식 |
|---|---|
| 원시값 | Object.is |
| plain object | shallow — 1st-level key/value를 Object.is로 비교 |
| 배열 | shallow — 요소별 Object.is 비교 |
Map / Set | entries/values를 Object.is로 비교 |
Date | getTime() 동등성 |
RegExp | source와 flags 동등성 |
| 기타 빌트인 (Error, Promise, enumerable own property가 없는 class instance) | 참조 동등성 (Object.is) |
store가 변경되어도 selected value가 shallow-equal이면 framework consumer에 notify하지 않습니다. 관련 있는 update는 정확히 한 번만 notify합니다.
React snapshots
React는 useSyncExternalStore를 사용합니다. snapshot getter는 selector를 적용하고 결과가 shallow-equal이면 이전 selection을 재사용합니다. server snapshot은 store의 initial state에서 선택하여 hydration 의미를 보존합니다.
Vue, Solid, Angular
Vue는 최신 state를 shallow ref에 보관하고 ComputedRef를 노출합니다. Solid는 createSignal로 Accessor를 노출합니다. Angular는 signal snapshot을 저장하고 computed Signal을 반환합니다.
Svelte
Svelte select는 subscription update마다 selector를 실행하는 readable store를 만듭니다.
주의할 점
selector는 cheap and pure하게 유지하세요. selector가 매번 새 object를 만들면 semantic value가 같아 보여도 일부 adapter에서 notify 또는 recompute가 일어날 수 있습니다. selector identity를 안정적으로 유지하려면 module scope에 정의하거나 useCallback으로 감싸세요.