extra-react-store

Install

npm install --save extra-react-store
# or
yarn add extra-react-store

Usage

import { Draft } from 'immer'
import { useMemo } from 'react'
import { createStoreContext, Store, useSelector, useUpdater } from 'extra-react-store'

interface IState {
  count: number
}

const Context = createStoreContext<IState>()

function App() {
  const store = useMemo<Store<IState>>(() => new Store({ count: 0 }), [])

  return (
    <Context.Provider value={store}>
      <Viewer />
      <Controller />
    </Context.Provider>
  )
}

function Viewer() {
  const count = useSelector(Context, state => state.count)

  return (
    <span>{count}</span>
  )
}

function Controller() {
  const update = useUpdater<IState>(Context)

  return (
    <button onClick={() => update(increment(1))}>Increment</button>
  )
}

function increment(value: number): (state: Draft<IState>) => void {
  return state => {
    state.count += value
  }
}

API

import { Draft } from 'immer'

type StoreContext<State> = React.Context<IStore<State>>

interface IStore<State> {
  getState(): State
  setState(newState: State): void
  subscribe(fn: (state: State) => void): () => void
}

type Updater<State> = (...args:
| [newState: State]
| [fn: (draft: Draft<State>) => void | State]
) => void

Store

class Store<State> implements IStore<State> {
  constructor(initialState: State)
}

createStoreContext

function createStoreContext<State>(): StoreContext<State>

useSelector

function useSelector<State, Value>(
  context: StoreContext<State>
, selector: (state: State) => Value
, isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
): Value

useUpdater

function useUpdater<State>(context: StoreContext<State>): Updater<State>

usePartialUpdater

function usePartialUpdater<State, PartialState>(
  context: StoreContext<State>
, extractPartialState: (state: State) => PartialState
, mergePartialState: (state: State, partialState: PartialState) => State
): Updater<PartialState>