Usage in React

Installation

npm install @selkt/react use-sync-external-store

Usage

@selkt/react contains one hook, useSelectable which takes any SelectableInterface, a selector and an optional equality function and returns the selected slice of the state.

import { MutableSelectable } from '@selkt/core'
import { useSelectable } from '@selkt/react'
 
const store = new MutableSelectable({
  counter: 0,
})
 
const App = () => {
  const counter = useSelectable(
    store,
    state => state.counter,
    // strictEqual
  )
 
  const increment = () => {
    store.set(state => {
      state.counter++
    })
  }
 
  return (
    <div>
      {counter}
      <button type="button" onClick={increment}>Increment</button>
    </div>
}

API

useSelectable<StateType, SliceType>(
  selectable: SelectableInterface<StateType>,
  selector: (state: StateType) => SliceType,
  equalityFn?: (state: SliceType, prevState: SliceType) => boolean
): SliceType

Selectable Selectable Interface