hooks-state

state management with react hooks

useStore

// store.js
import { createStore, use } from 'hooks-state'

const login = createStore({
  username: 'gmonking',
  password: '123',
})

export const useStore = use(login)

// component.js
import { useStore } from 'store.js'

const C = () => {
  const store = useStore() // { username: 'gmonking', password: '123' }
  
  return (<></>)
}

const C1 = () => {
  const password = useStore(['password']) // { password: '123' }
  return (<></>)
}

setStore

// store.js
import { createStore, use, set } from 'hooks-state'

const login = createStore({
  username: 'gmonking',
  password: '123',
})

export const useStore = use(login)
export const setStore = set(login)

// component.js
import { useStore, setStore } from 'store.js'

const C = () => {
  const store = useStore() // { username: 'gmonking', password: '123' }
  const onTap = () => setStore({ username: 'test' }) // { username: 'test', password: '123' }
  
  return (
    <button onClick={onTap} />
  )
}

getStore

// store.js
import { createStore, get } from 'hooks-state'

const login = createStore({
  username: 'gmonking',
  password: '123',
})

export const getStore = get(login)

// component.js
import { getStore } from 'store.js'

const C = () => {
  const store = getStore() // { username: 'gmonking', password: '123' }
  return (<></>)
}

const C1 = () => {
  const store = getStore(['username']) // { username: 'gmonking' }
  return (<></>)
}